角度js显示基于选定项目和url路径的名称

Question

我开始在角种子。我有一个json文件，显示下面的项目。

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

当我点击列表中的某个国家时，我想显示该项目的名称等详细信息。

我有这个工作如下所示。

/* app.js */ 
    'use strict'; 

    // 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 */ 
    <ul> 
     <li ng-repeat="country in countries"> 
     <div ng-click="changeView(country.name,$index)">{{country.name}}</div> 
     </li> 
    </ul> 

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

我不能去工作，如果我去http://www.example.com/app/#/然后导航到西班牙在列表中，然后我得到采取http://www.example.com/app/#/esp和{{名}}被作为ESP输出。

但是如果我导航直http://www.example.com/app/#/esp没有先按一下西班牙的名单我在$ scope.name得不到值

我怎样才能做到这一点？ 我希望名称也可以根据位置路径设置，如果可用。 我知道$位置。$$路径会让我/ ESP不过我真的不认为这是使用这个柜面的URL最好的主意构建出更大的东西如http://www.example.com/app/#/esp/events

我一些如何访问该项目的索引或ID，这样我可以再访问诸如

{{countries[0].name}} 

的数据，其中0是ESP ID - 1 什么是最好的方法？

Answer 1

伴侣，你的应用有几个问题。

• 你的服务保留“状态”，虽然仅用于检索信息
• 您使用的是相同的控制器2组不同的意见（糟糕的做法）
• $ scope.status = 'Unable to load data: ' + error.message; - >错误没有定义
• 有几个JS错误的太像误入逗号和东西

不管怎么说，这里是你的代码的修订版本。 Fiddle

---

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

// Router config 
myApp.config(['$routeProvider', 
    function($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); 
     } else { 
     deferred.resolve(countriesList, 200, ''); 
     } 
     return deferred.promise; 
    } 

    var getCountry = function(id) { 
     var deferred = $q.defer(); 
     if (countriesList.length == 0) { 
     getCountriesList().then(
      function() { 
      deferred.resolve(countriesList[id], 200, ''); 
      }, 
      function() { 
      deferred.reject('failed to load countries', 400, ''); 
      } 
     ); 
     } else { 
     deferred.resolve(countriesList[id], 200, ''); 
     } 
     return deferred.promise; 
    } 

    return { 
     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); 
     } 
    ); 
    } 
]); 

Answer 2

在您的“CountryCtrl”中，如果包含$ routeParams并使用$ routeParams.tlaname，则可以访问tlaname。然后您可以使用它来初始化您的数据。