AngularJS çoklu seçim girişlerini filtrele

Question

AngularJS için daha gelişmiş filtreleme mekanizmasıyla ilgili herhangi bir belge veya soruların bulunmadığına gerçekten şaşırdım - bu herhangi bir UI için gereklidir.

Geçerli öğeyi içeren seçim seçeneklerini filtrelemem gerekiyor. Soru, filtremize gelen adet öğesinin üzerinden yinelemek ve filtrelenen listedeki her seçim için uygun sonuçları döndürmek için her seçeneği nasıl ekleyebilirim. - Kanada, İngiltere, Amerika Birleşik Devletleri - biz üç bölgeyi varsa örneğin

seçeneğini girdi böyle okumalısınız: ... vb ..

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

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

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

ve

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

Bunun için bir çözüm buldum. bu temel filtre, ama aslında filtreye benim ng-tekrarında indeksi geçerli değerini geçmesi:

Filtre: Cevabınız için

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

Seçilmiş olanı içermeyen bir seçim yapmada bir hata var. Çözümü çözüme dahil edeceğim böylece görebiliyorsunuz.

ng seçeneklerine ihtiyacınız var. İşte 2 ayrı seçim kullanarak bir örnek.

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

İşte $scope adettir. Filtrelenen Bütçelerin, seçilen ülke hariç, yalnızca geri dönen ülkeler olduğuna dikkat edin. Fark edeceğiniz

$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; 
    }; 

böcek ikinci birini seçin en kısa sürede hemen seçeneklerden filtrelenen edildiğinden, bu, seçili değeri göstermek olmamasıdır. Bu en iyi kullanıcı deneyimi değil.

Çalışma örneği: http://plnkr.co/edit/cRBdkE3akCeBXYqfyHFO

Güncelleme: Ayrıca http://plnkr.co/edit/Hmt1OXYvtHOAZPzW7YK3?p=preview

yerine: Burada AngularUI Select2 yönergesi ile ng-seçenekleri kullanamazsınız beri seçkin 2 örnekle bir plunkr olduğunu Yukarıda listelenen filterCountries işlevi, bir watch daha verimli olacaktır. Sadece izlenen değer değişimini algıladığında kodu çalıştıracaktır.

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