将数据设为:
{
"obj1":{
"obj11":[
{
"name":"Tim",
"roll_number":"45"
},
{
"name":"Tom",
"roll_number":"20"
},
{
"name":"Deny",
"roll_number":"42"
}
],
"obj12":[
{
"name":"Jim",
"roll_number":"43"
},
{
"name":"Crook",
"roll_number":"46"
},
{
"name":"Michael",
"roll_number":"48"
}
]
}
}
具有键“obj11”和“obj12”,想要对与obj1内的这些特定键对应的项目重复特定的HTML代码块。这个重复的块基本上包含对应于数组中每个对象的'name'和'roll_number'。
<div ng-repeat="item in obj1['keyValue']">
<p>{{item.name}}</p>
<p>{{item.roll_number}}</p>
</div>
如果keyValue为'obj11',则输出为:
添
45
汤姆
20
拒绝
42
答案 0 :(得分:0)
将keyValue
分配给$scope
变量,然后在没有引号的情况下使用它:
ng-repeat="item in obj1[keyValue]"
JS:
$scope.keyValue = "obj12";
答案 1 :(得分:0)
您无法使用单次重复遍历obj11和obj12。因为obj11和obj12都进一步嵌套。您需要嵌套的ng-repeat,如下所示。考虑将整个json分配给某些变量“data”:
<div ng-repeat="item in data.obj1">
<div ng-repeat="a in item">
<p>{{a.name}}</p>
<p>{{a.roll_number}}</p>
</div>
</div>
答案 2 :(得分:0)
angular.module('app', []).controller('HomeCtrl', function($scope) {
$scope.keyValue = "obj11";
$scope.obj1 = {
"obj11": [{
"name": "Tim",
"roll_number": "45"
}, {
"name": "Tom",
"roll_number": "20"
}, {
"name": "Deny",
"roll_number": "42"
}],
"obj12": [{
"name": "Jim",
"roll_number": "43"
}, {
"name": "Crook",
"roll_number": "46"
}, {
"name": "Michael",
"roll_number": "48"
}]
};
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app" ng-controller="HomeCtrl">
<div ng-repeat="item in obj1[keyValue]">
<p>{{item.name}}</p>
<p>{{item.roll_number}}</p>
</div>
</div>
&#13;
而不是使obj1['keyValue']
表示密钥是文字值keyValue
,而不是将其绑定为范围变量。
因此,设置$scope.keyValue = "obj11";
,其中value是关键。
然后像obj1[keyValue]
ng-repeat
一样访问它
答案 3 :(得分:0)
您可以通过多种方式实现自己想要的目标。
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.item = {
"myItems": {
"child1": [{
"name": "Tim",
"roll_number": "45"
}, {
"name": "Tom",
"roll_number": "20"
}, {
"name": "Deny",
"roll_number": "42"
}],
"child2": [{
"name": "Jim",
"roll_number": "43"
}, {
"name": "Crook",
"roll_number": "46"
}, {
"name": "Michael",
"roll_number": "48"
}]
}
};
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="key">
<option ng-repeat="(key,val) in item.myItems" value="{{key}}">{{key}}</option>
</select>
<div ng-repeat="item in item.myItems[key]">
<p>{{item.name}}</p>
<p>{{item.roll_number}}</p>
</div>
</body>
&#13;