AngularJS ngのリピートどのようにJSONデータの下</p> <p>JSONデータ（vm.bookmarks）を使用して表示店、ブックマーク、お気に入りJSONデータ

からグループ名を表示するには：私はカテゴリのみをリストしたいAngularJS ngのリピートどのようにJSONデータの下</p> <p>JSONデータ（vm.bookmarks）を使用して表示店、ブックマーク、お気に入りJSONデータ

[ 
    { 
     "category": "stores", 
     "title": "store1", 
     "link": "http://www.store1.com", 
    }, 
    { 
     "category": "stores", 
     "title": "store1", 
     "link": "http://www.store2.com", 
    }, 
    { 
     "category": "bookmarks", 
     "title": "bookmark1", 
     "link": "http://www.bookmark1.com", 
    }, 
    { 
     "category": "bookmarks", 
     "title": "bookmark2", 
     "link": "http://www.bookmark2.com", 
    }, 
    { 
     "category": "bookmarks", 
     "title": "bookmark3", 
     "link": "http://www.bookmark3.com", 
    }, 
    { 
     "category": "favorites", 
     "title": "favorites1", 
     "link": "http://www.favorites1.com", 
    }, 
    { 
     "category": "favorites", 
     "title": "favorites2", 
     "link": "http://www.favorites2.com", 
    } 
]

をngのリピートを使用しての名前：

<div ng-repeat="item in vm.bookmarks|groupBy:'category'"> 
    <h2>{{item.category}}</h2> 
</div>

私はこれを表示させたい：

店
ブックマーク
お気に入り

しかし、それは何も表示されません！私は間違って何をしていますか？

P.S

このような私は何を注入せずにフィルターを使用していた

、：

私はGROUPBYフィルタを使用するように、角度フィルタを挿入する必要がある場合はわからない

<div ng-repeat="item in vm.bookmarks|filter:{category:'flyers'}" > 
    <a href="{{item.link}}">{{item.title}}</a> 
</div>

- なぜですか？

出典

2017-10-01 monstro

また、あなたは依存関係としてangular.filterを注入する必要があり、(key, value)を使用する必要はありません

var MyApp = angular.module("MyApp",['angular.filter']); 

<ul class="nav nav-tabs" data-tabs="tabs" 
    ng-repeat="bookmark in vm.bookmarks|groupBy:'category'"> 
    <li><a href="@tabid" data-toggle="tab">{{bookmark.category}}</a></li> 
</ul>

DEMO

var app = angular.module("myApp", ['angular.filter']); 
 
app.controller("SimpleController", function($scope) { 
 
    this.bookmarks = [ 
 
    { 
 
     "category": "stores", 
 
     "title": "store1", 
 
     "link": "http://www.store1.com", 
 
    }, 
 
    { 
 
     "category": "stores", 
 
     "title": "store1", 
 
     "link": "http://www.store2.com", 
 
    }, 
 
    { 
 
     "category": "bookmarks", 
 
     "title": "bookmark1", 
 
     "link": "http://www.bookmark1.com", 
 
    }, 
 
    { 
 
     "category": "bookmarks", 
 
     "title": "bookmark2", 
 
     "link": "http://www.bookmark2.com", 
 
    }, 
 
    { 
 
     "category": "bookmarks", 
 
     "title": "bookmark3", 
 
     "link": "http://www.bookmark3.com", 
 
    }, 
 
    { 
 
     "category": "favorites", 
 
     "title": "favorites1", 
 
     "link": "http://www.favorites1.com", 
 
    }, 
 
    { 
 
     "category": "favorites", 
 
     "title": "favorites2", 
 
     "link": "http://www.favorites2.com", 
 
    } 
 
]; 
 
var vm = this; 
 
    
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script> 
 
<body ng-app="myApp"> 
 
    <div> 
 
     <div data-ng-controller="SimpleController as vm"> 
 
     <ul class="nav nav-tabs" data-tabs="tabs" 
 
    ng-repeat="(key, value) in (vm.bookmarks|groupBy:'category')"> 
 
    <div ng-repeat="cat in value | unique:'category' "> 
 
      <h1> {{cat.category}}</h1> 
 
    </div> 
 
    </ul> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-10-01 18:53:37 Sajeetharan

フィルタであり、内蔵ngサービスで、なぜ私はそれを注入する必要がありますか？私が知る限り、groupByを使うとドキュメントごとに何も注入する必要はありません。申し訳ありませんが、あなたが投稿したコードフラグメントはどちらでも動作しません – monstro

あなたはそれについて確かですか？ – Sajeetharan

私はデモを添付しました、それを確認してください – Sajeetharan

AngularJS ngのリピートどのようにJSONデータの下</p> <p>JSONデータ（vm.bookmarks）を使用して表示店、ブックマーク、お気に入りJSONデータ

答えて

関連する問題