Angular nested ng-repeat class variable

Question

So I have a fairly complex angular table, and I have the repeating portion all good to go, but when I set a variable with ng-class-even and ng-class-odd, the variable doesn't seem to persist. Maybe I'm misunderstanding the scope of the ng-repeat, but I'm stumped.

My repeat looks something like:

<tr ng-repeat-start="item in data.group" ng-class-even="color='red'" ng-class-odd="color='blue'">
    <td>{{item.name}}</td>            
    <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="color">
        <td>{{inner.innername}}</td>
    </tr>
</tr>

So, I expect color to be set while the rows loop. Here's a Fiddle with the sample setup.

@JsIsAwesome I think you're misunderstanding what the code is doing. In `ng-class-even`, it sets a variable called `color` to a value of `red`. Maybe I didn't name my variables well enough. I'm trying to use the variable of `color` in my `ng-class`, but it's only set by the last repeating item. — Chad, Mar 30 '15 at 19:53

Pankaj Parkar · Accepted Answer · 2015-03-30T20:26:13.577

ng-class-even & ng-class-odd will look at the current ng-repeat $index object and decides which value should be given to class attribute.

ng-class-even / ng-class-odd

Takes an expression & the result of the evaluation can be a string representing space delimited class names or an array.

Change mark up like below HTML

Markup

<table>
    <tr ng-repeat-start="item in data.group" ng-init="$index%2==0?(color='blue'): (color='red')">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="color">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Fiddle

Update 1

Better solution would be directly use ng-class to inner ng-repeat

<table>
    <tr ng-repeat-start="item in data.group">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="$parent.$index%2 == 0? 'red': 'blue'">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Updated 1

Update 2

More accurate solution would be using $even or $odd object of $parent

<table>
    <tr ng-repeat-start="item in data.group">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="$parent.$even? 'red': 'blue'">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Update 2

That works, and I'll accept it, but do you have an idea why `ng-class-even` would not set a variable like that? — Chad, Mar 30 '15 at 19:56
`ng-class` even will directly needs the class value in string, they don't run any function..take a look at updated answer..which would be more efficient way — Pankaj Parkar, Mar 30 '15 at 19:58
@Chad take a look at my answer I updated the answer..how ng-class-even and odd works — Pankaj Parkar, Mar 30 '15 at 20:10

Angular nested ng-repeat class variable

1 Answers1