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

Question

我有一个 json 描述带有子数组 'actions' 的房间，描述必须对房间执行的操作。

Room > Actions: {1, 2, 3}

我想在一页上显示所有房间的所有操作，并且能够 filter/sort 它们。

此刻我已经走到这一步了

<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

...

我希望这些操作来自他们的房间 'independent'，这样我就可以对它们进行排序和过滤。

Answer 1

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>

Answer 2

您可以根据响应中的 Json 数据过滤您的房间和操作，方法是使用 'for' 循环和“$stateParams”，并且每个房间都需要一个 ID，因此您可以按 roomId 过滤操作。 注意：我在这里使用 AngularJs。

示例：（来自服务器的响应）：

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>

Answer 3

感谢您的帮助！在 Kyle 的帮助和 Mohammed 的启发下，我设法解决了我的问题。

$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]);
            }
        }
    });

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

Angular - ng-repeat - get all json subdata in 1 list

javascript

json

angularjs

angularjs-ng-repeat

arrays