如何避免选择中的重复字符串?

时间:2017-07-18 07:36:50

标签: angularjs select duplicates

如果我有这样的选择元素:

<select
        ng-model="dispatchOutput"
        ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params"
        class="form-control" 
        id="dispatchOutput" >

使用可能具有相同值的多个Strins的对象列表中的元素填充select,如何避免显示重复的条目?

2 个答案:

答案 0 :(得分:1)

您应创建自定义过滤器以过滤掉唯一值并将其应用于ng-options:

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; }); // (Assuming that you are using lodash in your app) if not use you custom logic here
    };
});

稍后在您的模板中,您可以使用此过滤器。

但我建议您使用https://github.com/a8m/angular-filter#unique

这里有许多过滤器可供使用,可以满足您的上述目的。

答案 1 :(得分:1)

使用唯一过滤器Unique-filter

&#13;
&#13;
angular.module("app",['angular.filter'])
  .controller("ctrl",['$scope',function($scope){
  $scope.searchFilterDispatcher={};
    $scope.searchFilterDispatcher.params = [
      {output:'abc', value:1},
      {output:'abc', value:1},
      {output:'xyz',  value:2}
    ]    
 
  }])
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<html>
<body ng-app="app" ng-controller="ctrl">
   <select
    ng-model="dispatchOutput"
    ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params | unique : 'output'"
    class="form-control" 
    id="dispatchOutput" >
</select>
</body>
<html>
&#13;
&#13;
&#13;