Angular 嵌套的 ng-repeats 与 json 调用不工作
Angular Nested ng-repeats with json call not working
我正在尝试使用 ng-repeat 和 json 文件制作这样的嵌套列表:
[] Pizza King North Region
[] Pizza King 102
[] Pizza King 103
[] Pizza King 104
[] Pizza King South Region
[] Pizza King 201
[] Pizza King 202
[] Pizza King East Region
[] Pizza King 203
[] Pizza King 204
etc...
这是我的json对象
{
"groups": [
{
"group_id": "Pizza King North Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King South Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King East Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King West Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
}
],
"systems": [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
}
这就是我在控制器中将其引入我的应用程序的方式:
App.controller('AddUserMultiCtrl', ['$rootScope', '$scope', '$http', '$modal', function ($rootScope, $scope, $http, $modal) {
var addUserMulti = this; // controllerAs
console.clear();
$http.get('app/users/data-temp/systems.json')
.success(function(response) {
addUserMulti.groups = response.groups;
addUserMulti.systems = response.systems;
})
.error(function (data) {
console.log("Error retrieving user data.");
});
这是我的 html:
<ul class="nav">
<li ng-repeat="group in addUserMulti.groups">
<label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
</li>
<ul class="nav">
<li ng-repeat="system in group.systems">
<label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox"
value="option1">{{ system.panel_id }} </label>
</li>
</ul>
</ul>
这是结果:我的群组进入但没有嵌套系统
我得到了父项列表,但没有子项。
我当然希望得到一些指导,因为到目前为止我尝试遵循的所有代码示例都不起作用!
Systems 是组内的数组,因此如果您不在组内迭代系统,您将看不到任何子项。
你必须把你的 system in group.systems
块 放在 里面 group in addUserMulti.groups
块。
试试这个:
<ul class="nav">
<li ng-repeat="group in addUserMulti.groups">
<label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
<ul class="nav">
<li ng-repeat="system in group.systems">
<label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox" ="option1">{{ system.panel_id }} </label>
</li>
</ul>
</li>
</ul>
这样,组就正确嵌套了,因此 group.systems
存在。
我正在尝试使用 ng-repeat 和 json 文件制作这样的嵌套列表:
[] Pizza King North Region
[] Pizza King 102
[] Pizza King 103
[] Pizza King 104
[] Pizza King South Region
[] Pizza King 201
[] Pizza King 202
[] Pizza King East Region
[] Pizza King 203
[] Pizza King 204
etc...
这是我的json对象
{
"groups": [
{
"group_id": "Pizza King North Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King South Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King East Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
},
{
"group_id": "Pizza King West Region",
"systems" : [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
}
],
"systems": [
{
"panel_id": "Pizza King 101"
},
{
"panel_id": "Pizza King 102"
},
{
"panel_id": "Pizza King 103"
},
{
"panel_id": "Pizza King 104"
}
]
}
这就是我在控制器中将其引入我的应用程序的方式:
App.controller('AddUserMultiCtrl', ['$rootScope', '$scope', '$http', '$modal', function ($rootScope, $scope, $http, $modal) {
var addUserMulti = this; // controllerAs
console.clear();
$http.get('app/users/data-temp/systems.json')
.success(function(response) {
addUserMulti.groups = response.groups;
addUserMulti.systems = response.systems;
})
.error(function (data) {
console.log("Error retrieving user data.");
});
这是我的 html:
<ul class="nav">
<li ng-repeat="group in addUserMulti.groups">
<label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
</li>
<ul class="nav">
<li ng-repeat="system in group.systems">
<label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox"
value="option1">{{ system.panel_id }} </label>
</li>
</ul>
</ul>
这是结果:我的群组进入但没有嵌套系统
我得到了父项列表,但没有子项。
我当然希望得到一些指导,因为到目前为止我尝试遵循的所有代码示例都不起作用!
Systems 是组内的数组,因此如果您不在组内迭代系统,您将看不到任何子项。
你必须把你的 system in group.systems
块 放在 里面 group in addUserMulti.groups
块。
试试这个:
<ul class="nav">
<li ng-repeat="group in addUserMulti.groups">
<label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
<ul class="nav">
<li ng-repeat="system in group.systems">
<label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox" ="option1">{{ system.panel_id }} </label>
</li>
</ul>
</li>
</ul>
这样,组就正确嵌套了,因此 group.systems
存在。