AngularJs删除ng-repeat中的重复元素

我有一个存储在field_detail字典

 <li ng-repeat = "field in field_detail">{{field.displayName}}</li> 

现在我不想包含field_detail重复displayName ,我应该使用什么样的filter

5 Solutions collect form web for “AngularJs删除ng-repeat中的重复元素”

只要创build一个filter,获取唯一的值,可能是一个关键。 像这样的东西应该做的(我没有testing这个,所以我会把这个业务给你,这只是给你一个想法):

 app.filter('unique', function() { return function(collection, keyname) { var output = [], keys = []; angular.forEach(collection, function(item) { var key = item[keyname]; if(keys.indexOf(key) === -1) { keys.push(key); output.push(item); } }); return output; }; }); 
 <div ng-repeat="item in items | unique: 'id'"></div> 

注意:Array.indexOf()在IE8中不起作用 ,所以如果你支持IE8,你需要在indexOf()中存根,否则你需要使用一个稍微不同的方法。

其他想法:如果您已经引用这些库,则可能最好创build一个filter来利用lowdash或underscore中的独特函数。

我根据Ben Leash提供的答案开发了一个JSFiddle:

http://jsfiddle.net/ThunderHemlock/bvsvzrr5/1/

谢谢,本。 其他答案需要使用AngularJS UI或其他这样的附加框架。

 var app = angular.module('app', []); app.filter('unique', function() { return function(collection, keyname) { var output = [], keys = []; angular.forEach(collection, function(item) { var key = item[keyname]; if(keys.indexOf(key) === -1) { keys.push(key); output.push(item); } }); return output; }; }); app.controller('MyCtrl', function ($scope) { $scope.items = [ { id : 1, column : "col1", comment : "col1-label1", text1 : "col1-label1-text1", checked: false, }, { id : 2, column : "col1", comment : "col1-label2", text1 : "col1-label2-text1", checked: false, }, { id : 3, column : "col2", comment : "col2-label1", text1 : "col2-label1-text1", checked: false, }, { id : 4, column : "col2", comment : "col2-label2", text1 : "col2-label2-text1", checked: false, }, { id : 5, column : "col3", comment : "col3-label1", text1 : "col3-label1-text1", checked: false, }, { id : 6, column : "col3", comment : "col3-label2", text1 : "col3-label2-text1", checked: false, }, { id : 7, column : "col4", comment : "col4-label1", text1 : "col4-label1-text1", checked: false, }, { id : 8, column : "col4", comment : "col4-label2", text1 : "col4-label2-text1", checked: false, } ]; }); <div ng-app="app"> <div ng-controller="MyCtrl as item"> <ul> <li ng-repeat="item in items | unique: 'column'"> {{ item.column }} </li> </ul> </div> </div> 

为了搭载Ben Lesh,我添加了一个选项来删除数组中的重复对象,如果keyname是伪造的:

 app.filter('unique', function () { return function ( collection, keyname) { var output = [], keys = [] found = []; if (!keyname) { angular.forEach(collection, function (row) { var is_found = false; angular.forEach(found, function (foundRow) { if (foundRow == row) { is_found = true; } }); if (is_found) { return; } found.push(row); output.push(row); }); } else { angular.forEach(collection, function (row) { var item = row[keyname]; if (item === null || item === undefined) return; if (keys.indexOf(item) === -1) { keys.push(item); output.push(row); } }); } return output; }; }); 

我得到一张票,说当用户点击保存时,他们得到一个错误,说唯一约束违反,等等等等。他们希望我的屏幕显示他们重复之前数据库强制约束。 所以我写了一个函数来遍历对象数组的所有实例并计算它的实例。

 $scope.anyDuplicates = function () { var dupes = false; for (var i = 0; i < $scope.kpiList.length; i++) { $scope.kpiList[i].cnt = 0; for (var j = 0; j < $scope.kpiList.length; j++) { if ($scope.kpiList[i].description == $scope.kpiList[j].description) { $scope.kpiList[i].cnt++; } if ($scope.kpiList[i].cnt > 1) dupes = true; } } return dupes; } 

…我在脚本中使用这个函数来防止保存,就像这样:

 if ($scope.anyDuplicates()) { alert('Duplicates Detected. Please remove the duplicates before pressing the save button.'); } else { save(); } 

…并在添加新logging时向用户显示,如下所示:

 $scope.kpiList.push({kpiId: newId, description: newDescription, new: true}); $scope.anyDuplicates(); 

…然后在我的HTML我有一些东西告诉用户重复的地方…

 <tr ng-repeat="row in kpiList | filter:searchText | orderBy:['kpiTypeId', 'description'] "> <td> <span ng-show="row.cnt > 1" style="color: red; font-size: xx-small"> duplicate </span> </td> ... </tr> 

是的,我故意将每个实例与自己进行比较。 这样的代码less了。 我检查是否.cnt> 1而不是> 0。

另外要注意… kpiList.cnt字段不存在,直到该函数第一次运行。 ng-show =“row.cnt> 1”表示一个假(不是真的),直到row.cnt有一个值才会显示。

此外,您应该使用StyleSheet来设置您的跨度,而不是将其放置在style属性中。

创build你自己的function:

 productArray =[]; angular.forEach($scope.leadDetail, function(value,key){ var index = $scope.productArray.indexOf(value.Product); if(index === -1) { $scope.productArray.push(value.Product); } 

});

  • ng-repeat指定一个起始索引
  • 在ngRepeat中$首先
  • Angular JS Scaling&Performance
  • 在“ng-repeat”迭代中使用AngularJs“ng-style”
  • 如何过滤angularJS中的多个值(OR操作)
  • angular度改变延迟
  • angularjs ng-style:background-image不起作用
  • 元素中的Ang-ng重复条件包装项(ng-repeat中的组项)
  • 使用ngRepeat =>不可编辑的input将input绑定到一系列基元
  • 来自子ng-repeat的父子ng-repeat的访问索引
  • orderBy两个字段(一个反向)