.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);
取出数据,渲染。
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",
"CountryId":1
},
{
"Id": 3,
"Name": "Bangalore",
"CountryId":1
},
{
"Id": 4,
"Name": "Chennai",
"CountryId":1
},
{
"Id": 5,
"Name": "Hyderabad",
"CountryId":1
}
]
},
{
"Id": 2,
"Name": "USA",
"Cities": [
{
"Id": 6,
"Name": "New York",
"CountryId":2
},
{
"Id": 7,
"Name": "Los Angules",
"CountryId":2
},
{
"Id": 8,
"Name": "Chicago",
"CountryId":2
},
{
"Id": 9,
"Name": "Houston",
"CountryId":2
},
{
"Id": 10,
"Name": "Philadelphia",
"CountryId":2
}
]
},
{
"Id": 3,
"Name": "UK",
"Cities": [
{
"Id": 11,
"Name": "London",
"CountryId":3
},
{
"Id": 12,
"Name": "Birmingham",
"CountryId":3
},
{
"Id": 13,
"Name": "Coventry",
"CountryId":3
},
{
"Id": 14,
"Name": "Liverpool",
"CountryId":3
},
{
"Id": 15,
"Name": "Manchester",
"CountryId":3
}
]
}
]