AngularJS 필터 다중 선택 입력

Question

AngularJS에 대한이 고급 필터링 메커니즘과 관련하여 아무 문서 나 질문이 없기 때문에 실제로 놀랍습니다. 이는 모든 UI에 필수적입니다.

현재 항목을 포함하는 선택 옵션을 필터링해야합니다. 질문은 항목을 필터로 가져 와서 필터링 할 목록의 각 선택 항목에 대해 적절한 결과를 반환 할 때 각 옵션을 연결하는 방법입니다. - 캐나다, 영국, 미국 - 우리는 세 지역이있는 경우 예를 들어

, 선택 입력은 다음과 같이 읽어야 ... 등등 ..

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> 

자바 스크립트 :

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 반복에서 인덱스의 현재 값을 전달합니다

필터 : 귀하의 답변에 대한

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

업데이트 : 또한 http://plnkr.co/edit/Hmt1OXYvtHOAZPzW7YK3?p=preview

대신 : 당신이 여기에 AngularUI 선택 2 지시자 NG-옵션을 사용할 수 없기 때문에이 선택이 예와 plunkr입니다 위에 나열된 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); 
    });