Javascript AngularJS唯一筛选器不工作

我有以下代码，无法将其与

unique

过滤器一起使用

同样在JSFIDLE上，它也不起作用。在我的HTML中，填充了

select

，但

unique

过滤器不起作用

多谢各位

<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>

卡拉托林德拉酒店
选择EAZA。。。
{{rec.plecare}}
卡特尔
选择EAZA。。。
{{rec.sosire}}
角度.module（'example'，[]）.controller（'exampleCtrl'，function（$scope）{
$scope.myRecs=[{
瓦尔普：“啊哈”，
plecare:“阿尔盖罗（AHO）”，
sosire:“都灵-卡塞尔（TRN）”，
VAL:'TRN'
}, {
valp:'ATH'，
请注意：“Atena（ATH）”，
sosire:“康斯坦塔（CMD）”，
vals:'CMD'
}, {
valp:'ATH'，
请注意：“Atena（ATH）”，
sosire:“拉纳卡（LCA）”，
VAL：“LCA”
}, {
valp:'ATH'，
请注意：“Atena（ATH）”，
sosire:“Londra-Luton（LTN）”，
VAL:'LTN'
}];
});

我把你的JSFIDLE分叉了

您需要创建如下自定义筛选器：

.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}}">

然后像这样使用它：

.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}}">

我把你的JSFIDLE分叉了

您需要创建如下自定义筛选器：

.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}}">

然后像这样使用它：

.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}}">

---

据我所知，唯一筛选器需要从另一个模块“ui.filters”调用

---

抱歉，如果我的英语不好。

据我所知，需要从另一个模块“ui.filters”调用唯一筛选器

---

抱歉，如果我的英语不太好。

jsiddle对angularjs有问题，请在plunker中试用。它应该是这样工作的：-对meIs来说现在这样工作似乎很好，但我希望unique处于活动状态，以便Atena在select中只显示一次。您是否正确包含angular ui unique筛选器？jsiddle对angularjs有问题，在plunker中试用。它应该是这样工作的：-对meIs来说现在这样工作似乎很好，但我希望unique处于活动状态，以便Atena在select中只显示一次。您是否正确地包括angular ui unique filter？谢谢，这是我想要的。谢谢，这是我想要的。