ng-class-even not applying class

Question

So I'm trying to zebra stripe my ng-repeat so the rows can be easily distinguished.

I think I have everything wired up correctly, but the classes just aren't being applied.

I've created a plunker here.

My html looks like this:

<div ng-repeat="removal in removals" ng-class-even="even" ng-class-odd="odd" class="remove-relation-titles-list">
      <div class="pull-left relation-titles-left-list">
           <span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
           <span class="acct-title"> - Standard Checking</span>
      </div>
</div>

So, the regular class is being applied just fine, but the even and odd ones aren't at all. If you inspect the object and add the even class yourself, it shows up beautifully. I've tried moving this down to the div inside the ng-repeat with no results.

Am I missing something obvious?

Answer 1

Change your ng-class to:-

ng-class="{'even':$even,'odd':$odd}"

Plnkr

$even and $odd are the properties added by ng-repeat on its scope.

or change it to take string value of the class names otherwise it will try to replace the class based on the property even or odd which does not exist:-

ng-class-odd="'odd'" ng-class-even="'even'"