0

我的网络应用程序有一个 REST API，它返回一个 JSON，它将我的数据库中的几个表连接在一起。我可以毫无问题地将它们拉入我的 AngularJS 应用程序，但是当我想按其中一个字段对输出进行分组时，我找不到明确的方法来执行此操作。

作为我目前如何获得服务的示例：

angular.module('myapp.services', ['ngResource'])
.factory('Item', function($resource) {
    return $resource('api/items/:itemId', {}, {
        query: {method: 'GET', isArray: true}
    });
})

然后我通过以下方式拉入：

<div class="items">
    <div class="item" ng-repeat="item in items">
        <div ng-include="'/partials/item.html'"></div>
    </div>
</div>

我想做的是在列表中显示这些项目的集合，并根据组名对其进行分组。所以调用：

/api/collections/:collection_id/items

会像这样返回 JSON 输出（以下是一项）：

[ { item_id: 1,
    item_name: 'Monkey',
    item_action: 'Eats a banana',
    group_id: 1,
    group_name: 'Primates',
    collection_id: 1,
    collection_name: 'Animals'
} ]

所以我希望能够像这样输出它们的一个集合：

<h1>Animals</h1>
<div class="group">
    <h2>Primates</h2>
    <div class="items">
            <div class="item">
                    <p>Monkey - eats a banana</p>
                    <p>Gorilla - bangs his chest</p>
            </div>
    </div>
</div>
<div class="group">
    <h2>Fish</h2>
    <div class="items">
            <div class="item">
                    <p>Salmon - sings Sinatra songs</p>
            </div>
    </div>
</div>
<div class="group">
    <h2>Insects</h2>
    <div class="items">
            <div class="item">
                    <p>Ant - Forages for food</p>
            </div>
    </div>
</div>

这是否可以使用某种 ng-repeat 结构，例如我上面的示例？我几乎可以肯定它是，但我是 AngularJS 的新手，并且很难在网上找到任何这样的例子。

我想保留从该 JSON 文件中读取的所有内容，以将对数据库的请求保持在最低限度（页面加载时的一个请求，然后 JS 处理其余请求）。

任何帮助是极大的赞赏！

4

1 回答 1

1

您可以通过嵌套过滤器实现一个过滤器用于分组，另一个与组过滤器嵌套

这是html模板：

<div ng-app ng-controller="Main">
<h1>{{collectionName}}</h1>
<div class="group" ng-repeat="itemPerGroup in itemsToFilter() | filter:filterItems">
<h2>{{itemPerGroup.group_name}}</h2>
    <div class="items">
            <div class="item">
                    <p ng-repeat="item in items | filter:{group_name: itemPerGroup.group_name}">{{item.item_name}}</p>
            </div>
    </div>
</div>

控制器脚本：

function Main($scope) {
$scope.items = [{item_id: 1,
item_name: 'Monkey',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Primates',
collection_id: 1,
                   collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Salmon',
item_action: 'sings Sinatra songs',
group_id: 1,
group_name: 'Fish',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Ant ',
item_action: 'Forages for food',
group_id: 1,
group_name: 'Insects',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Gorilla',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Primates',
collection_id: 1,
collection_name: 'Animals'},
                {item_id: 1,
item_name: 'Worm',
item_action: 'Eats a banana',
group_id: 1,
group_name: 'Insects',
collection_id: 1,
collection_name: 'Animals'}];

var indexedTeams = [];
$scope.collectionName = $scope.items[0].collection_name;

$scope.itemsToFilter = function() {
    indexedItems = [];
    return $scope.items;
}

$scope.filterItems = function(item) {
    var itemIsNew = indexedItems.indexOf(item.group_name) == -1;
    if (itemIsNew) {
        indexedItems.push(item.group_name);
    }
    return itemIsNew;
}

}

快乐编码:)

于 2015-06-09T13:32:04.440 回答