wake-up-neo.com

Kann ich mit den Eigenschaften $ odd oder $ even ng-repeat filtern?

Ich versuche, eine ng-repeat-Liste automatisch nach Index zu filtern. Kann man das irgendwie machen? Ich versuche es, aber es funktioniert nicht:

<div data-ng-repeat="thing in things | filter:$even" >
     <div>{{thing.name}}</div>
</div>

Gibt es einen richtigen Weg, um dies zu erreichen? 

javascriptangularjsangularjs-directive
22
Edgar Martinez

Es werden $ gerade Namen der Dinger-Liste angezeigt. 

<div ng-repeat="thing in things" ng-if="$even">
    {{thing.name}}
</div>
43
Humberto Morera

Aktualisierte: 

Oder schreiben Sie eine Prädikatsfunktion: Working Exmaple
Dokumente: ngRepeat

HTML:

<div data-ng-repeat="thing in things | filter:filterEvenStartFrom(0)">
    <div>{{thing.name}}}</div>
</div>

JS:

$scope.filterEvenStartFrom = function (index) {
    return function (item) {
        return index++ % 2 == 1;
    };
};

Original:

Wie wäre es damit:

<div data-ng-repeat="thing in things" ng-hide="$even">
     <div>{{thing.name}}}</div>
</div>
6
Banana-In-Black

Das Dokumentation von ng-repeat gibt Auskunft über die besonderen Eigenschaften, die wir in diesem Fall verwenden können. Sie können verwenden:

  • $even -> true, wenn die Iteratorposition $ index gerade ist (andernfalls false).
  • $odd -> true, wenn die Iteratorposition $ index ungerade ist (andernfalls false).

Codebeispiele:

<div data-ng-repeat="thing in things" ng-if="$even">
     <div>{{thing.name}}</div>
</div>

oder

<div data-ng-repeat="thing in things" ng-if="$odd">
     <div>{{thing.name}}</div>
</div>

oder

<div data-ng-repeat="thing in things" ng-class="{'my-odd-class': $odd}">
     <div>{{thing.name}}</div>
</div>

oder

<div data-ng-repeat="thing in things" ng-class="{'my-even-class': $even}">
     <div>{{thing.name}}</div>
</div>
0
lin

Genau wie @Humberto, aber mit einem bedingten Vergleich

<div ng-repeat="i in [0,1]" class="column_{{ i }}">
  <div ng-repeat="thing in things" ng-if="$even == ( i == 0 )">
    {{thing.name}}
  </div>
</div>
0
pcnate