21

したがって、配列がある場合:

$scope.letters = 
[{"id":"a"},
{"id":"b"},
{"id":"c"}];

そして別の配列

$scope.filterBy = ["b","c","d"];

そして、$filterBy に表示される項目だけで $scope.letters をフィルタリングする ng-repeat が必要です。

次のような効果が得られるようにしたい:

<span ng-repeat="{{letter in letters|filter: letter.id in filterBy }} > {{letter.id}} </span>

そして、b、cを印刷させます

これは非常にばかげた例ですが、別の配列オブジェクトの内容に基づいて angular.js 式をフィルタリングする方法はありますか?

4

3 に答える 3

36

アップデート

これは、Angularアプリケーション内にこのフィルターを簡単に実装するためのAngularモジュール(@InviSの回答に基づく)です: filters-inArrayFilter

@InviSの回答に基づく角度フィルターのアプローチは次のとおりです。

フィルタは次のようになります。

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }
    };
});

listはフィルタリングするリストです (このパラメーターはデフォルトで angular によって設定されます)、arrayFilterはフィルターとして使用する配列であり、elementはリストでフィルター処理するプロパティの名前です。

このフィルターを使用するには、ng-repeat を次のように使用します。

<div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>

ここで、inArrayはフィルター、filterBy (このフィルターの最初の引数)は照合する配列、"id" (2 番目の引数)は配列と照合するリストの要素です。

角度フィルター アプローチを使用して、このライブ サンプルを試すことができます。

于 2014-01-16T20:12:06.377 に答える
29

次のようなことを試してみてください。

JS: 

angular.module('Test', []);

function Ctrl($scope) {
  $scope.letters = [
    {id: 'a'},
    {id: 'b'},
    {id: 'c'}
  ];

  $scope.filterBy = ['b', 'c', 'd'];

  $scope.filteredLetters = function () {
    return $scope.letters.filter(function (letter) {
      return $scope.filterBy.indexOf(letter.id) !== -1;
    });
  };
}

Ctrl.$inject = ['$scope'];

HTML: 

<div ng-repeat='letter in filteredLetters(letters)'>{{letter.id}}</div>

実際の例を試すことができます。

于 2013-03-16T21:45:40.563 に答える
6

かなり古いですが、必要だったので、少し変更する必要がありました。これが私のフィルター「notInArray」です

app.filter('notInArray', function($filter){
return function(list, arrayFilter, element){
    if(arrayFilter){
        return $filter("filter")(list, function(listItem){
          for (var i = 0; i < arrayFilter.length; i++) {
              if (arrayFilter[i][element] == listItem[element])
                  return false;
          }
          return true;
        });
    }
};

});

<md-chips ng-model="filter.SelectedValues" md-autocomplete-snap
          md-require-match="true">
      <md-autocomplete
          md-search-text="searchFilterChip"
          md-items="val in filter.Values | notInArray:filter.SelectedValues:'Id'"
          md-item-text="val.Name"
          md-no-cache="true"
          md-min-length="0">
        <span md-highlight-text="searchFilterChip">{{val.Name}}</span>
      </md-autocomplete>
      <md-chip-template>
        {{$chip.Name}}
      </md-chip-template>
  </md-chips>

これは改善できると思いましたが、私の場合は必要ありません。

それが誰かを助けることを願っています!

于 2016-02-12T13:44:04.890 に答える