AngularJs删除ng-repeat中的重复元素
我有一个存储在field_detail字典
<li ng-repeat = "field in field_detail">{{field.displayName}}</li>
现在我不想包含field_detail重复displayName ，我应该使用什么样的filter ？
只要创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); }
}）;
