Angular - ng-repeat - 获取1个列表中的所有json子数据

时间:2015-01-02 12:31:21

标签: javascript json angularjs angularjs-ng-repeat arrays

我有一个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;从他们的房间,我可以对它们进行排序和过滤。

3 个答案:

答案 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)

Demo

使用嵌套转发器,您可以使用过滤器将操作范围限定到特定房间。

<强> 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' ">
               &nbsp;&nbsp;&nbsp;&nbsp;{{ 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>