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 但的列表，每个类别只出现一次，这样用户就可以点击某个类别并显示该类别中的所有小部件。我怎么能这样做？对不起，我还没有继续下去，因为我几乎不知道从哪里开始。

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中现有的“唯一”过滤器。

<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>

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

4 个答案: