7

AngularJS のこのより高度なフィルタリング メカニズムに関するドキュメントや質問がどこにもないことに本当に驚いています。これはどの UI にも不可欠です。

現在のアイテムを含む選択オプションを除外する必要があります。問題は、フィルターに到達するアイテムを反復処理するときに各オプションをどのようにつなぎ合わせ、フィルター処理されたリスト内の各選択に対して適切な結果を返すことができるかです。

たとえば、カナダ、英国、米国の 3 つの地域がある場合、select 入力は次のようになります。

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;

    };

});
4

2 に答える 2

5

現在選択されているものを選択に含めないようにすることに問題があります。あなたがそれを見ることができるように、私は解決策にバグを含めます.

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

バグは、2 番目のものを選択するとすぐにオプションから除外されるため、選択した値が表示されないことです。それは最高のユーザー エクスペリエンスではありません。

作業例: http://plnkr.co/edit/cRBdkE3akCeBXYqfyHFO

更新: AngularUI Select2 ディレクティブで ng-options を使用できないため、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); 
  });
于 2013-03-07T00:28:51.687 に答える
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>
于 2013-03-13T21:46:20.857 に答える