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

函数中的

'property'在示例中是'id'，而collection是指整个数组。

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


});

Here is AngularJS自定义过滤器教程。

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

2 个答案: