AngularJS ng-repeat 显示来自 JSON 数据的组名答案

【问题标题】：AngularJS ng-repeat to display group names from JSON dataAngularJS ng-repeat 显示来自 JSON 数据的组名
【发布时间】：2017-10-01 18:52:04
【问题描述】：

如何使用以下 JSON 数据显示存储、书签、收藏夹

JSON 数据（vm.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",
    }
]

我想使用 ng-repeat 仅列出类别名称：

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

我希望显示这个：

商店
书签
收藏夹

但它什么也没显示！我做错了什么？

附言

我使用过滤器而不注入任何东西，像这样：

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

不确定是否需要注入 angular-filter 才能使用 groupBy 过滤器 - 为什么？

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

你不需要使用 (key, value) ，你也需要注入 angular.filter 作为依赖

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>

演示

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>

【讨论】：

过滤器是ng服务内置的，为什么需要注入呢？据我所知，使用 groupBy 不需要为每个文档注入任何内容。抱歉，您发布的代码片段也不起作用
你确定吗？
我附上了一个demo，看看吧
嗯，有趣...谢谢，你有没有提到它说我需要注入 angular-filter ？我一直在使用过滤器，没有注入任何东西
是的，有过滤器但有限stackoverflow.com/questions/14800862/…