angular1中的路由的$routeParams服务

前端之家收集整理的这篇文章主要介绍了angular1中的路由的$routeParams服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

.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",{ "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

猜你在找的Angularjs相关文章