CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Bobo
Bobo

Reputation: 1016

ng-class-even not applying class

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?

Upvotes: 5

Views: 5118

Answers (2)

Raja Sekar
Raja Sekar

Reputation: 2130

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="[email protected]"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="removeTitlesCtrl">
      <div id="body_content_wrapper">
        <div>
          <h4 class="heading toggle header-block">These are the accounts chosen</h4>
        </div>
        <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>
      </div>
    </div>
  </body>

</html>

This is a simple mistake please correct.

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

Upvotes: 2

PSL
PSL

Reputation: 123739

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'"

Upvotes: 9

Related Questions