Menu
I want to assign alternate class to rows in a table. I am using ng-repeat on
<tr ng-repeat="event in events"> I want to get output like this:
<tr class="odd">...</tr> <tr class="event">....</tr> I've tried this (doesn't work):
<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'"> I can't get it to work. Also it seems like Angular is using 'class' attribute to. Why is it doing so? Can I tell AngularJS not to use the class attribute for internal evaluations?
Please help. Thanks!
277
For example by using ngClassOdd,ngClassEven directives we gonna add alternate row colors in table. First create css, for applying different color to each type, blow is the css. The ng-app directive initializes an AngularJS application.
ngClass is a directive in Angular that adds and removes CSS classes on an HTML element. In this article, we are talking about ngClass in Angular only, not ng-class in angular.js. Prerequisites – What is Property Binding? Two things we have to understand first are property binding and interpolation in Angular.
CSS class (es) for all rows. Provide either a string (class name) or array of strings (array of class names). Callback version of property rowClass to set class (es) for each row individually. Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
Choose the folder and open it. Now it's time to create the component for the project, so open the terminal and type the following command, First, we will add the reference for bootstrap and toaster in the angular.json file. Type the following command to generate the model file for the class. We're all done with installation and project setup.
You should be using the angular directives ngClassEven and ngClassOdd for this.
Have a look at the documentation section for how to use them
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd
Hope this helps.
104
From the Angular docs..
Use ng-class-odd ng-class-even
<li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> {{name}} </span> </li> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
