Question

我有以下代码，我无法使用unique过滤器。

同样在jsfiddle上它不起作用。在我的HTML中，select已填充，但unique过滤器无效。

https://jsfiddle.net/krayziekry/sw8dvy3u/

谢谢

<div ng-app="example" ng-controller="exampleCtrl">
  <!-- Select Basic -->
  <div class="form-group span6">
    <label class="control-label" for="from">Calatorind de la</label>
    <div>
      <select id="from" name="from" class="form-control" ng-model="selected.valp">
        <option value="">Selecteaza...</option>
        <option ng-repeat="rec in myRecs | filter: {vals: selected.vals} | orderBy:'plecare' | unique: 'plecare'" value="{{rec.valp}}">{{rec.plecare}}</option>
      </select>
    </div>
  </div>
  <!-- Select Basic -->
  <div class="form-group span6">
    <label class="control-label" for="to">catre</label>
    <div>
      <select id="to" name="to" class="form-control" ng-model="selected.vals">
        <option value="">Selecteaza...</option>
        <option ng-repeat="rec in myRecs | filter: {valp: selected.valp} | orderBy:'plecare'" value="{{rec.vals}}">{{rec.sosire}}</option>
      </select>
    </div>
  </div>
</div>

<script>        
angular.module('example', []).controller('exampleCtrl', function($scope) {

      $scope.myRecs = [{
        valp: 'AHO',
        plecare: 'Alghero (AHO)',
        sosire: 'Torino - Caselle (TRN)',
        vals: 'TRN'
      }, {
        valp: 'ATH',
        plecare: 'Atena (ATH)',
        sosire: 'Constanta (CMD)',
        vals: 'CMD'
      }, {
        valp: 'ATH',
        plecare: 'Atena (ATH)',
        sosire: 'Larnaca (LCA)',
        vals: 'LCA'
      }, {
        valp: 'ATH',
        plecare: 'Atena (ATH)',
        sosire: 'Londra - Luton (LTN)',
        vals: 'LTN'
      }];
    });
</script>

Answer 1

据我所知，需要从另一个模块'ui.filters'调用独特的过滤器。

对不起，如果我的英语不合适。

Answer 2

我分叉你的jsfiddle here

您需要创建一个这样的自定义过滤器：

.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;
   };
})

并像这样使用它：

<option ng-repeat="rec in myRecs | unique: 'valp' | orderBy:'plecare'" value="{{rec.valp}}">

AngularJS独特的过滤器不起作用

2 个答案: