javascript - AngularJS 过滤器唯一删除 ng-options 中的重复项

Question

我有一个数组:

$scope.arr1 = [option1, option2, option3, option1, option3]

我用它来填充选择选项:

<select class="form-control" ng-model="arr1"
     ng-options="option for option in arr1">
     <option value="" disabled>Please select an option</option>
</select>

选项已填充，但我想从中删除重复项。我已经尝试过:

ng-options="option for option in arr1 | unique: 'option'"

但它给出了空结果

Answer 1

Angular 不提供任何开箱即用的过滤器来实现您的需求。

您尝试使用 ng-options="option for option in arr1 | unique: 'option'"，但在 Angular 中没有名为 unique 的过滤器。

您可能想查看 Angular here 中可用的过滤器.

为了获得您想要的结果，您需要创建自定义过滤器来实现这一点。我在下面创建了一个片段，它将过滤常见值。这应该适合你。

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>