Question

我的Web应用程序有一个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处理其余请求）。

非常感谢任何帮助！

Answer 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;
}

}

快乐编码:)

使用AngularJS中的$ resource服务对检索到的数据进行分组

1 个答案: