以图形方式隐藏一些用ng-repeat迭代的项目

Question

我正在使用Angular Js开发Web应用程序。 我想使用ng-repeat指令将div填充到我的html视图中。 ng-repeat使用的数组有一些重复项，但在我看来，我只想显示一次（如果元素已经显示，则其副本必须以图形方式隐藏）。 我怎样才能做到这一点？

<div ng-repeat="item in selectedProcedures track by $index">
    <span>{{item.id}}</span>                                            
</div>

Answer 1

只需使用像这样的独特过滤器：

<div ng-repeat="item in selectedProcedures track by $index | unique : 'id'">
    <span>{{item.id}}</span>                                            
</div>

然后创建唯一的过滤器：

app.filter('unique', function() {
    return function(collection, property) {
        var output = [];
        angular.forEach(collection, function(item) {
            //check if it exists in output on the basis of property, if not then add to output
            output.push(item);
        }) 
        return output;
    }
})

在示例中，函数中的“属性”为“ id”，而集合指的是整个数组。

Answer 2

我建议您不要隐藏生成的HTML，而是添加过滤器以删除重复项：

<div ng-repeat="item in selectedProcedures track by $index  | deleteDuplicates">
. . .
</div>

angular.module('myApp').filter('deleteDuplicates', function(){ 
    return function filterCore(source)
    {        
        var out = [];
        // . . . 
        return(out);
    };


});

这是 AngularJS自定义过滤器教程。