如何只显示一次一组数据的一个属性？

Question

我正在用 Angular 做一些测试，看看我是否可以更有效地复制我在 PHP 中已有的内容。

我有一组数据存储在JSON:

[
    {
        "name":"Blue Widget",
        "description":"blue-widget",
        "snippet":"The best blue widget around!",
        "category":"Home Widgets",
        "popular":true
    },
    {
        "name":"Red Widget",
        "description":"red-widget",
        "snippet":"The best red widget around!",
        "category":"Outdoor Widgets",
        "popular":true
    },
    {
        "name":"Green Widget",
        "description":"green-widget",
        "snippet":"The best green widget around!",
        "category":"Work Widgets",
        "popular":true
    },
    {
        "name":"Yellow Widget",
        "description":"yellow-widget",
        "snippet":"The best yellow widget around!",
        "category":"Home Widgets",
        "popular":true
    }
]

我在我的控制器中抓取它并以相当标准的方式将它添加到我的视图中（是的，我知道不能在生产中的控制器中直接使用 $http）：

widgetApp.controller('widgetListCtrl', function($scope,$http){
    $http.get('widgets/widgets.json').success(function(data){
        $scope.widgets = data
    })
})

如果我使用：

<li ng-repeat="widget in widgets">{{widget.category}}</li>

然后自然会通过并列出：

Home Widgets
Outdoor Widgets
Work Widgets
Home Widgets

我想做的是生成每个 widget.category but 的列表，每个类别只出现一次，这样用户就可以点击一个类别并显示该类别中的所有小部件。我该怎么做？抱歉，我没有任何事情要做，因为我几乎不知道从哪里开始。

Answer 1

您必须构建一个独特类别列表：

widgetApp.controller('widgetListCtrl', function($scope,$http){
    $http.get('widgets/widgets.json').success(function(data){
        $scope.uniqueCategories = [];
        for (var i = 0; i < $scope.widgets.length; i++) {
            if ($scope.uniqueCategories.indexOf($scope.widgets[i].category) === -1)
                $scope.uniqueCategories.push($scope.widgets[i].category);
        }
    });
});

创建一个下拉列表，将 model 设置为类别：

<select ng-model="categoryFilter" ng-options="category as category for category in uniqueCategories"></select>

并在重复时使用 filter：

<li ng-repeat="widget in widgets | filter: { category: categoryFilter }">{{widget.category}}</li>

Answer 2

创建过滤器

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; });
    };
});

在标记中

<li ng-repeat="widget in widgets | unique:'category'">{{widget.category}}</li>

Answer 3

您可以使用 AngularUI 中现有的 'unique' 过滤器。

<li ng-repeat="widget in widgets | unique: 'widget.category' ">{{widget.category}}</li>

请务必在您的应用中也包含对过滤器模块的引用（例如 angular.module('yourModule', ['ui', 'ui.filters']);）。

Answer 4

创建独特的过滤器并在您的视图中使用它：

angular.filter("distinct", function () {
  return function (data, propertyName) {
     if (angular.isArray(data) && angular.isString(propertyName)) {
        var results = [];
        var keys = {};
        for (var i = 0; i < data.length; i++) {
           var val = data[i][propertyName];
           if (angular.isUndefined(keys[val]) && val != null) {
              keys[val] = true;
              results.push(val);
           };
        };
        return results;
     }
     else {
        return data;
     }
  }
})

<li ng-repeat="widget in widgets | distinct:'category'">{{widget.category}}</li>

如何只显示一次一组数据的一个属性？

How can I display one attribute of a set of data just once?

angularjs

angularjs-ng-repeat