web-dev-qa-db-ja.com

フィルターと$ indexでng-repeatを使用する方法は？

私はAngularでng-repeatを使用したいのですが、配列の一部の要素のみを出力したいです。例：

ng-repeat="item in items | filter:($index%3 == 0)"

ただし、これは機能しません。これを行う方法を教えてください。要素の正確なインデックスのみを出力します。

javascriptangularjsng-repeat
27
Frankjs

コードでは、フィルターは各アイテムではなく「items」アレイに適用されます。そのため、期待どおりに機能しません。

代わりに、ng-show（またはng-if）を使用できます。

<ul>
    <li ng-repeat="item in items" ng-show="$index % 3 == 0">{{item}}</li>
</ul>

参照： http://jsfiddle.net/H7d26

編集：目に見えないdom要素を追加したくない場合は、ng-ifディレクティブを使用します。

<ul>
    <li ng-repeat="item in items" ng-if="$index % 3 == 0">{{item}}</li>
</ul>
41
Mickael

カスタム filter を作成します。例：

filter('modulo', function(){
  return function (arr, div, val) {
      return arr.filter(function(item, index){
          return index % div === (val || 0);
      })
  };
});

次に、ng-repeatを次のように変更します。

<ul ng-repeat="item in items | modulo:3">

または、次のように(index % 3 === 1)でフィルタリングします。

<ul ng-repeat="item in items | modulo:3:1">

http://jsfiddle.net/Tc34P/2/

16
CD..

あなたがする必要があるのは、$ scope.itemsで "item"のインデックスを見つけることです。下記参照

ng-repeat"item in items | filter:(items.indexOf(item)%3 == 0)

したがって、現実世界の例（このソリューションに出くわす他の人）は次のようになります。

<div ng-repeat="item in filtered = (items | filter:customfilter | orderBy:customsort)">
    <div> This is number {{items.indexOf(item)}} in the items list on the scope.</div>
</div>

上記の例は、ソートやフィルタリングに関係なく正しい位置を取得します

8
dworrad

先例の答えはすべて機能しますが、フィルターを使用する場合は、次のフィドルのように自分で定義することもできます。 http://jsfiddle.net/DotDotDot/58y7u/

.filter('myFilter', function(){
    return function(data, parameter){
        var filtered=[];
        for(var i=0;i<data.length;i++){
                if(i%parameter==0)
                    filtered.Push(data[i]);
        }
        return filtered;
    }
});

そして、次のように呼び出します：

ng-repeat='item in items | myFilter:3'

（例えば偶数にすばやく変更したい場合は、パラメーターに複雑さを追加しました）

楽しむ

++

2
DotDotDot

関数でフィルタリングすることをお勧めします：

ng-repeat"item in filterItems(items)"

そして、コントローラー上で：

$scope.filterItems= function(items) {
    var result = {};
    angular.forEach(items, function(item) {
       // if item is something.. add to result
    });
    return result;
}
1
Jaanus

これを解決する別の方法は、ng-repeatに新しい「リスト」（このコンテキストでは適切な用語がわからない）を作成します。この新しいリストは、スコープ内で参照できます

<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="friend in filteredFriends = ((friends | filter:q:strict) | orderBy:'age')" ng-if="$index % 2 == 0">
    [{{$index + 1}}] {{filteredFriends[$index].name}} who is {{filteredFriends[$index].age}} years old.
    <span ng-if="$index+1 < filteredFriends.length">[{{$index + 2}}] {{filteredFriends[$index+1].name}} who is {{filteredFriends[$index+1].age}} years old.</span>
  </li>
</ul>

spanの後半のng-ifは、前の要素がリストの最後の要素であるときにベーステキストが表示されないようにします。

0
Adam Shaver