AngularJS фильтр несколько входов выбора

Question

Я действительно удивлен, что нет документации нигде или вопросов относительно этого более продвинутого механизма фильтрации для AngularJS - это важно для любого пользовательского интерфейса.

Мне нужно отфильтровать опции, которые включают текущий элемент. Вопрос в том, как я могу объединить все варианты, когда мы перебираем через пункты, которые приходят к нашему фильтру и возвращают правильные результаты для каждого выбора в отфильтрованном списке.

, например, если у нас есть три области - Канада, Великобритания, США - выберите вход следует читать следующим образом:

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

Я придумал решение. это основной фильтр, но я на самом деле передать текущее значение индекса в моем нг-повторе к фильтру:

Фильтр:

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 - это то, что вам нужно. Вот пример с использованием двух отдельных выборок.

<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 штук. Обратите внимание, что filterCountries только что возвращают страны, за вычетом выбранной страны.

$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

Update: Поскольку вы не можете использовать нг-параметры с помощью директивы AngularUI Select2 здесь является plunkr с отборной 2 Например: http://plnkr.co/edit/Hmt1OXYvtHOAZPzW7YK3?p=preview

Кроме того, вместо функция filterCountries, как указано выше, будет более эффективной. watch. Он будет запускать код только тогда, когда он обнаружит изменение наблюдаемого значения.

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