.when("/countries/:idd",{
templateUrl: "Templates/countryDetail.html",controller: "countryDetailController"
})
.controller("countryDetailController",function ($scope,$http,$routeParams) {
$http.get("./data.json").then(function (response) {
$scope.country = response.data[$routeParams.idd];
console.log($scope.country);
console.log(1);
console.log($routeParams.idd+':'+$routeParams);
for (var i in $routeParams) {
console.log( i+':'+$routeParams[i])
};
});
<a href="index.html#/countries/{{$index}}">{{country.Name}}</a>
以上是路由 控制器 模板。
注意点:
1.$routeParams这个对象打印出来是{
idd : {{$index}}
}一一对应的键值对。
2.整个路由渲染过程是 点击a链接,/countries/{{$index}},实际是/countries/0,1,2之类,匹配到路由
.when("/countries/:idd),
触发控制器,
$scope.country = response.data[$routeParams.idd];
console.log($scope.country);
console.log($scope.country);
取出数据,渲染。
3.ng-repeat的$index 对应于 服务$routeParams的value。
4.:idd id xy xyz任意你,但是对应于[$routeParams.idd id xy xyz];得到3,的value值。这样将全局都联系起来。
data如下:
[ { "Id": 1,"Name": "India","Cities": [ { "Id": 1,"Name": "Mumbai","CountryId":1 },{ "Id": 2,"Name": "Delhi",{ "Id": 3,"Name": "Bangalore",{ "Id": 4,"Name": "Chennai",{ "Id": 5,"Name": "Hyderabad","CountryId":1 } ] },{ "Id": 2,"Name": "USA","Cities": [ { "Id": 6,"Name": "New York","CountryId":2 },{ "Id": 7,"Name": "Los Angules",{ "Id": 8,"Name": "Chicago",{ "Id": 9,"Name": "Houston",{ "Id": 10,"Name": "Philadelphia","CountryId":2 } ] },{ "Id": 3,"Name": "UK","Cities": [ { "Id": 11,"Name": "London","CountryId":3 },{ "Id": 12,"Name": "Birmingham",{ "Id": 13,"Name": "Coventry",{ "Id": 14,"Name": "Liverpool",{ "Id": 15,"Name": "Manchester","CountryId":3 } ] } ]
原文链接:https://www.f2er.com/angularjs/148452.html