javascript AngularJS 过滤器唯一删除 ng-options 中的重复项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33443933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS filter unique removing duplicates in ng-options
提问by Tikaa
i have an array:
我有一个数组：
$scope.arr1 = [option1, option2, option3, option1, option3]
I am using it to fill select options:
我用它来填充选择选项：
<select class="form-control" ng-model="arr1"
ng-options="option for option in arr1">
<option value="" disabled>Please select an option</option>
</select>
the options are populated but i want to remove duplicates from them. i have tried:
选项已填充，但我想从中删除重复项。我努力了：
ng-options="option for option in arr1 | unique: 'option'"
but it gives empty results
但它给出了空的结果
回答by Amit
Angular does not provide any out of the box filter to achieve what you need.
Angular 不提供任何开箱即用的过滤器来实现您的需求。
You tried using ng-options="option for option in arr1 | unique: 'option'", but in angular there is no filter called unique.
您尝试使用ng-options="option for option in arr1 | unique: 'option'"，但在 angular 中没有名为 的过滤器unique。
You might want to look at the available filters in angular here.
您可能想在此处查看angular 中的可用过滤器。
To get the result you want, you will want to create your custom filter to do that. I have created a snippet below which will filter common values. This should work for you.
为了获得您想要的结果，您需要创建自定义过滤器来做到这一点。我在下面创建了一个片段，它将过滤常见的值。这应该对你有用。
var app = angular.module("myapp", []);
app.controller("testCntrl", function($scope){
$scope.arr1 = ['option1','option2','option3','option1','option3'];
})
.filter("removeDups", function(){
return function(data) {
if(angular.isArray(data)) {
var result = [];
var key = {};
for(var i=0; i<data.length; i++) {
var val = data[i];
if(angular.isUndefined(key[val])) {
key[val] = val;
result.push(val);
}
}
if(result.length > 0) {
return result;
}
}
return data;
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="testCntrl">
<select class="form-control" ng-model="arr"
ng-options="option for option in arr1 | removeDups">
<option value="" disabled>Please select an option</option>
</select>
</div>
</div>回答by scniro
uniqueis not included with AngularJS - this filteris bundled with older versions on AngularUI, and also appears to be commonly available at a8m/angular-filter. You can retrofit it within your app, roll your own, or include a providing module. Observe the following...
unique不包含在 AngularJS 中 -此过滤器与 AngularUI 上的旧版本捆绑在一起，并且似乎在a8m/angular-filter 上也普遍可用。您可以在您的应用程序中对其进行改造，推出您自己的，或包含一个提供模块。观察以下...
ng-options="option for option in arr1 | unique"
// -- AngularUI implementation
.filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});
JSFiddle Link- working demo
JSFiddle 链接- 工作演示
