我有一个json描述带有子阵列的房间'动作'描述了必须对房间进行的操作。
房间>行动:{1,2,3}
我希望在一个页面上显示所有房间的所有操作。能够过滤/排序它们。
目前我已经来到这里了。
<div ng-repeat="room in rooms">
<ul class="list-group">
<li class="list-group-item" ng-repeat="action in room.actions">
显示所有操作,但按房间分组。
行动1 - 房间1
行动2 - 房间1
行动3 - 房间2
行动4 - 房间2
...
我希望这些行动是独立的&#39;从他们的房间,我可以对它们进行排序和过滤。
答案 0 :(得分:1)
Thx的帮助!在凯尔的一点帮助和穆罕默德的灵感下,我设法解决了我的问题。
$http.get('rooms.json').success(function (data) {
campus.rooms = data;
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].actions.length; j++) {
campus.allActions.push(data[i].actions[j]);
}
}
});
答案 1 :(得分:0)
使用嵌套转发器,您可以使用过滤器将操作范围限定到特定房间。
<强> JS 强>
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.rooms = [
{id:1, text:'room 1'},
{id:2, text:'room 2'},
{id:3, text:'room 3'}];
$scope.actions = [
{room:{id:1, text:'room 1'}, name:'action 1', number:1 },
{room:{id:2, text:'room 2'}, name:'action 2', number:2 },
{room:{id:3, text:'room 3'}, name:'action 3', number:3 }];
});
<强> HTML 强>
<body ng-app="app" ng-controller="ctrl">
<div ng-repeat="room in rooms">
{{ room.text }} <br />
<div ng-repeat="action in actions | filter:{ room:room } | orderBy: 'number' ">
{{ action.name }}
</div>
</div>
</body>
答案 2 :(得分:0)
您可以使用“for”循环和“$ stateParams”根据响应中的Json数据过滤房间和操作,并且每个房间都需要一个Id,以便您可以按roomId过滤操作。 注意:我在这里使用AngularJ。
示例:(来自服务器的响应):
<强> JSON:强>
{"rooms ":[
{"roomId":"1", "value":"Room 1", "action":"Action 1"},
{"roomId":"2", "value":"Room 2", "action":"Action 2"},
{"roomId":"3", "value":"Room 3", "action":"Action 3"}
]}
<强> JS:强>
$http({
method: 'GET',
url: "your server url here: from where you get the json data"
}).
success(function(res) {
$scope.Rooms= res;
for (i = 0; i < res.length; i++) {
if (res[i].roomId== $stateParams.roomId) {
$scope.actions = res[i];
break;
console.log(res);
}
}
}).
error(function(err) {
console.log(err);
});
<强> HTML:强>
<div class="list">
{{actions.action}}
</div>