0

データベースから複数のテーブルを結合する 1 つの JSON を返す Web アプリ用の REST API があります。これらを AngularJS アプリに問題なく取り込むことができますが、出力をフィールドの 1 つにグループ化する場合、これを行う明確な方法が見つかりません。

私が現在どのようにサービスを利用しているかの例として：

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 出力が返されます (以下は 1 つの項目の場合です)。

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

だから私は次のようにそれらの1つのコレクションを出力できるようにしたいと思います:

<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を初めて使用し、このような例をオンラインで見つけるのに苦労しています.

データベースへのリクエストを最小限に抑えるために、その 1 つの JSON ファイルからすべてを読み取り続けたいと思います (ページの読み込み時に 1 つのリクエストを行い、残りは JS が処理します)。

どんな助けでも大歓迎です！

4

1 に答える 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 に答える