我开始使用有 Angular 种子。我有一个 json 文件，显示如下所示的项目。

{
    "id":"1",
    "name":"Spain",
    "abbrev":"esp"
}

当我单击列表中的某个国家/地区时，我希望显示详细信息，例如该项目的名称。

我的工作如下所示。

    /* app.js */
    'sử dụng nghiêm ngặt';

    // Declare app level module which depends on views, and components
    angular.module('myApp', ['ngRoute','myApp.controllers','myApp.services'])

    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/', {
        templateUrl: 'templates/view1.html',
        controller: 'CountryCtrl'
      });
    }])

    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/:name', {
        templateUrl: 'templates/view2.html',
        controller: 'CountryCtrl'
      });
    }])

    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.otherwise({redirectTo: '/'});
    }]);

    /* services.js */
    angular.module('myApp.services', [])
    .factory('Countries', ['$http', function($http) {
        var Countries = {};
        Countries.name = '';
        Countries.listCountries = function () {
            return $http.get('../api/countries');
        },
        Countries.ChangeName = function (value) {
            Countries.name = value;
        }
        return Countries;
    }]);

    /* controllers.js */

    angular.module('myApp.controllers', [])

    .controller('CountryCtrl', ['$scope', 'Countries', '$location', function($scope, Countries,$location) {
        listCountries();
        function listCountries() {Countries.listCountries()
          .success(function (data, status, headers, config) {
              $scope.countries = data.countries;
          })
          .error(function(data, status, headers, config) {
              $scope.status = 'Unable to load data: ' + error.message;
          });
        }
        $scope.name = Countries.name;
        $scope.changeView = function(countryName,indx){
            $location.path(countryName);
            $scope.name = Countries.ChangeName(countryName);
        }
    }]);

    /* templates/view1.html */
    

      

        
{{country.name}}

      

    


    /* templates/view2.html */
    {{name}}

我无法上类的是，如果我去http://www.example.com/app/#/然后导航到列表中的西类牙，然后我会进入 http://www.example.com/app/#/esp并且 {{name}} 被输出为 esp。

但是，如果我直接导航到 http://www.example.com/app/#/esp如果不先单击列表中的西类牙，我的 $scope.name 中就没有任何值

我怎样才能实现这个目标？我希望也根据位置路径(如果可用)来设置名称。我知道 $location.$$path 会让我/esp 但我真的不认为这是使用它的最佳主意，以防 url 构建为更大的东西，例如 http://www.example.com/app/#/esp/events

我可以如何访问该项目的索引或ID，以便我可以访问数据，例如

    {{countries[0].name}}

其中 0 是 esp - 1 的 id。最好的方法是什么？

câu trả lời hay nhất

伙计，您的应用存在一些问题。

• 尽管您的服务仅用于检索信息，但仍保留“状态”
• 您在 2 个不同的 View 中使用同一个 Controller (不好的做法)
• $scope.status = '无法加载数据:' + error.message; --> 错误未定义
• 也有一些 js 错误，比如漏掉的逗号之类的

无论如何，这是您的代码的修订版本。 vĩ cầm

// Instantiate your main module
var myApp = angular.module('myApp', ['ngRoute']);

// Router config
myApp.config(['$routeProvider',
  hàm($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'templates/view1.html',
        controller: 'CountryListCtrl'
      })
      .when('/:id', {
        templateUrl: 'templates/view2.html',
        controller: 'CountryCtrl'
      })
  }
]);

// Your Factory. Now returns a promise of the data.
myApp.factory('Countries', ['$q',
  function($q) {
    var countriesList = [];

    // perform the ajax call (this is a mock)
    var getCountriesList = function() {
      // Mock return json
      var contriesListMock = [{
        "id": "0",
        "name": "Portugal",
        "abbrev": "pt"
      }, {
        "id": "1",
        "name": "Spain",
        "abbrev": "esp"
      }, {
        "id": "2",
        "name": "Andora",
        "abbrev": "an"
      }];
      var deferred = $q.defer();
      if (countriesList.length == 0) {
        setTimeout(function() {
          deferred.resolve(contriesListMock, 200, '');
          countriesList = contriesListMock;
        }, 1000);
      } khác {
        deferred.resolve(countriesList, 200, '');
      }
      return deferred.promise;
    }

    var getCountry = function(id) {
      var deferred = $q.defer();
      if (countriesList.length == 0) {
        getCountriesList().then(
          chức năng() {
            deferred.resolve(countriesList[id], 200, '');
          },
          chức năng() {
            deferred.reject('failed to load countries', 400, '');
          }
        );
      } khác {
        deferred.resolve(countriesList[id], 200, '');
      }
      return deferred.promise;
    }

    trở lại {
      getList: getCountriesList,
      getCountry: getCountry
    };
  }
]);


//Controller of home page (pretty straightforward)
myApp.controller('CountryListCtrl', ['$scope', 'Countries',
  function($scope, Countries) {
    $scope.title = 'Countries List';
    $scope.countries = [];
    $scope.status = '';

    Countries.getList().then(
      function(data, status, headers) { //success
        $scope.countries = data;
      },
      function(data, status, headers) { //error
        $scope.status = 'Unable to load data:';
      }
    );
  }
]);

// controller of Country page
// Notice how we use $routeParams to grab the "id" of our country from the URL
// And use our service to look for the actual country by its ID.
myApp.controller('CountryCtrl', ['$scope', '$routeParams', 'Countries',
  function($scope, $routeParams, Countries) {
    $scope.country = {
      id: '',
      name: '',
      abbrev: ''
    };
    var id = $routeParams.id;

    Countries.getCountry(id).then(
      function(data, status, hd) {
        console.log(data);
        $scope.country = data;
      },
      function(data, status, hd) {
        console.log(data);
      }
    );
  }
]);

关于javascript - Angular js 根据所选项目和 url 路径显示名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26730719/