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

我正在使用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

）：

如果我使用：

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

---

我想做的是生成每个

小部件的列表。category

，但每个类别只出现一次，这样用户就可以单击一个类别并显示该类别中的所有小部件。我该怎么办？对不起，我没有什么要说的，因为我几乎不知道从哪里开始。

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

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

并在重复时使用

过滤器

：

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

{{widget.category}

创建一个过滤器

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>

{{widget.category}

您可以从中使用现有的“唯一”筛选器

{{widget.category}

---

请确保在应用程序中也包含对过滤器模块的引用（例如，

angular.module（'yourModule'，['ui'，'ui.filters']）；

）。

创建一个独特的文件，并在视图中使用它：

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>

angular.filter（“distinct”），函数（）{
返回函数（数据、属性名称）{
if（angular.isArray（数据）和&angular.isString（propertyName））{
var结果=[]；
var键={}；
对于（变量i=0；i{{{widget.category}

Reference：我尝试过这个方法，但似乎无法让它发挥作用-我下载了

ui-utils.js

文件并在HTML中引用了它，在angular模块中删除了它，但它抛出了一个注入器错误。我做错了：）喷油器错误说明了什么？使用

angular.js

而不是

angular.min.js

来获取更详细的错误消息。我得到了它-我在模块中使用了错误的依赖项名称-它是

ui-utils

。

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>

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

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>