AngularJS过滤多个选择输入

Question

我真的很惊讶没有任何文档或关于 AngularJS 的这种更高级过滤机制的问题 - 它对于任何 UI 都是必不可少的。

我需要过滤掉包含当前项目的选择选项。问题是当我们遍历进入过滤器的 items 时，如何拼接出每个选项，并为正在过滤的列表中的每个选择返回正确的结果。

例如，如果我们有三个区域 - 加拿大、英国、美国 - 选择输入应如下所示：

Canada
  [select]
    [option0] United Kingdom
    [option1] United States

United Kingdom
  [select]
    [option0] Canada
    [option1] United States

United States
  [select]
    [option0] Canada    
    [option1] United Kingdom 

..等等...

HTML：

<div ng-repeat="region in data.regions">
    <h2> {{region.name}} </h2>
    <input ui-select2="version2" type="hidden" name="keywordsLocal-{{$index}}" class="region-keywords input-xlarge" data-ng-model="data.regions[$index].keywords" required-multiple />
    <select ui-select2 id="copy-{{$index}}" ng-show="region.length > 1" class="input-xlarge" ng-click="_copy($event, $index)" data-ng-model="data.regions[$index].keywords">
        <option value="">Use the same keywords as:</option>
        <option ng-repeat="region in data.regions | myFilter" value="{{region.keywords}}">{{region.name}}</option>
    </select>
</div>

Javascript：

app.filter('myFilter', function() {

    return function(items) {
        var group = [];

        for (var i = 0; i < items.length; i++) {
            group.push(items.name);
        }

        for (var i = 0; i < group.length; i++) {
           group[i].splice(i, 1);
        }

        return group;

    };

});

Answer 1

我想出了一个解决方案。它是一个基本过滤器，但我实际上将 ng-repeat 中索引的当前值传递给过滤器：

过滤器：

app.filter('keywordFilter', function() {
    return function(items, name) {
        var arrayToReturn = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].name != name.name) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
});

HTML

<select ui-select2 id="copy-{{$index}}" class="input-xlarge" ng-change="_copy($index)" ng-options="region.name for region in data.regions | keywordFilter: {name: region.name}" data-ng-model="selectedKeywords">
    <option value="">Use same keywords as:</option>
</select> 

Answer 2

使选择不包括当前选择的内容存在缺陷。我会将错误包含在解决方案中，以便您查看。

ng-options 是您所需要的。这是一个使用 2 个单独选择的示例。

<select ng-model='selectedCountry' ng-options='country.name for country in countries'></select>
<select ng-model='selectedCountry' ng-options='country.name for country in filteredCountries()'></select>

这是$scope 件。请注意，filteredCountries 只是返回国家，减去所选国家。

  $scope.countries = [{name:'United States'},{name:'United Kingdom'},{name:'Canada'}];

  $scope.filteredCountries = function(){
    var filteredCountries = [];
    angular.forEach($scope.countries, function(val, key){
      if(val !== $scope.selectedCountry){
        this.push(val);
      }
    },filteredCountries);
    return filteredCountries;
  };

您会注意到的错误是，当您选择第二个时，它不会显示您选择的值，因为它会立即从选项中过滤掉。这不是最好的用户体验。

工作示例： http://plnkr.co/edit/cRBdkE3akCeBXYqfyHFO

更新： 由于您不能将 ng-options 与 AngularUI Select2 指令一起使用，这里是一个带有 select 2 示例的 plunkr：http://plnkr.co/edit/Hmt1OXYvtHOAZPzW7YK3?p=preview

除了上面列出的filteredCountries 函数之外，watch 会更有效。它只会在检测到观察值发生变化时运行代码。

$scope.$watch('version1model',function(){
    $scope.filteredItems = [];
    angular.forEach($scope.items, function(val, key){
      if(val.id != $scope.version1model){
        this.push(val);
      }
    },$scope.filteredItems); 
  });