AngularJS lọc nhiều đầu vào lựa chọn

Question

Tôi thực sự ngạc nhiên khi không có tài liệu nào ở bất kỳ đâu hoặc các câu hỏi liên quan đến cơ chế lọc nâng cao hơn này cho AngularJS - đó là điều cần thiết cho bất kỳ giao diện người dùng nào.

Tôi cần phải lọc ra các tùy chọn đã chọn bao gồm mục hiện tại. Câu hỏi đặt ra là làm thế nào tôi có thể tách ra từng tùy chọn khi chúng tôi lặp qua các mục đến bộ lọc của chúng tôi và trả lại kết quả phù hợp cho từng lựa chọn trong danh sách đang được lọc.

ví dụ, nếu chúng ta có ba vùng - Canada, Vương quốc Anh, Hoa Kỳ - sự lựa chọn đầu vào nên đọc như thế này:

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

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

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

.. và vv ...

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

Tôi đã đưa ra giải pháp cho điều này. nó là một bộ lọc cơ bản, nhưng tôi thực sự vượt qua giá trị hiện tại của chỉ số trong tôi ng-repeat đến bộ lọc:

Lọc:

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

Có một lỗ hổng trong việc chọn lựa không bao gồm những gì hiện được chọn. Tôi sẽ bao gồm lỗi trong giải pháp để bạn có thể nhìn thấy nó.

tùy chọn ng là những gì bạn cần. Dưới đây là một ví dụ sử dụng 2 lựa chọn riêng biệt.

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

Đây là các mảnh $scope. Lưu ý rằng các selectedCountries chỉ là các quốc gia trở về, trừ đi quốc gia đã chọn.

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

Lỗi bạn sẽ nhận thấy là ngay sau khi bạn chọn thẻ thứ hai, lỗi này sẽ không hiển thị giá trị đã chọn, vì nó ngay lập tức được lọc ra khỏi các tùy chọn. Đó không phải là trải nghiệm người dùng tốt nhất.

dụ làm việc: http://plnkr.co/edit/cRBdkE3akCeBXYqfyHFO

Cập nhật: Vì bạn không thể sử dụng ng-tùy chọn với chỉ thị AngularUI Select2 đây là một plunkr với một chọn 2 ví dụ: http://plnkr.co/edit/Hmt1OXYvtHOAZPzW7YK3?p=preview

Ngoài ra thay vì chức năng filterCountries như được liệt kê ở trên, một watch sẽ hiệu quả hơn. Nó sẽ chỉ chạy mã khi phát hiện giá trị đã xem thay đổi.

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