Using Angular JS to apply the ng-class-odd directive within nested ng-repeat loops

Question

Using Angular JS to apply the ng-class-odd directive within nested ng-repeat loops

I am in the process of creating a flexible table outputter that can handle any number of rows or columns. This is achieved by using nested ng-repeat attributes, as shown below:

<table>
    <tr ng-repeat="row in rowList">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

Everything is working smoothly until I attempt to utilize ng-class-even and ng-class-odd to change the background color of the rows alternately.

If I apply the ng-class-*** statements to the td tag, the alternating colors are applied to the columns instead of the rows.

When I move the ng-class-*** statements to the tr tag, no classes are assigned at all, leaving the rows with the default styling.

My goal is to have alternating row colors. How can I achieve this?

javascript angularjs nested angularjs-ng-repeat

Answer 1

Answer №1

Using the ng-class-odd and ng-class-even attributes allows for assigning a string value like ng-class-odd="'myClass'" or an expression such as

ng-class-odd="{myClass: boolExpression}"

In Angular versions 1.2 and above, you can use:

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

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: $even, odd: $odd}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>
<hr />

For Angular versions below 1.2, the syntax is:

ng-class="{even: !($index%2), odd: ($index%2)}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: !($index%2), odd: ($index%2)}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

For more examples, visit: http://jsfiddle.net/TheSharpieOne/JYn7S/1/

Answer 2

Using the ng-class-odd and ng-class-even attributes allows for assigning a string value like ng-class-odd="'myClass'" or an expression such as

ng-class-odd="{myClass: boolExpression}"

In Angular versions 1.2 and above, you can use:

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

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: $even, odd: $odd}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>
<hr />

For Angular versions below 1.2, the syntax is:

ng-class="{even: !($index%2), odd: ($index%2)}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: !($index%2), odd: ($index%2)}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

For more examples, visit: http://jsfiddle.net/TheSharpieOne/JYn7S/1/

Using Angular JS to apply the ng-class-odd directive within nested ng-repeat loops

Answer №1

Similar questions

What is the best way to showcase my subscription form on a web browser?

Simultaneously iterate through two recursive arrays (each containing another array) using JavaScript

Manipulating prop values through dropdown selection

Drawing recursive 2D tree fractals using WebGL technology

How to efficiently assign a random set of values to a group of players in Javascript/nodejs while ensuring each player does not receive their own inputted value

JSON nested array

Arranging an Array Object in Javascript by Date

Having trouble loading the JSON data for display

Facing challenges in implementing a logic to showcase an intricate page on express.js (node.js) platform

AngularJS event listener fired twice

Modifying Input Types Using Javascript Within an HTML Table

The unexpected disappearance of data in a d3 v4 map leaves users puzzled

Shifting Directive Logic to a Method within a Vue Component

When using phonegap with iOS, HTTP requests consistently return a status of 0 when accessing local files

How to deal with an empty $_FILES array when there is file data present in $_POST

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

various functions being managed in version 1.0.5 versus 1.2.19

Module 'prompt-sync' not found

JavaScript/jQuery: Retrieve the correct header for every element

What is the best way to import a TypeScript file in index.js?