Angular JS – ngRepeat with control variables

Within an ng-repeat directive I can have various information about the status of the loop.To access these informations Angular provides a set of special variables (with prefix “$”). I can also use the ng-class-event/ng-class-odd to have an alternating style through the rows.

<h3>Display data in a table</h3>
<table>
    <tr>
        <th>Index</th>
        <th>First</th>
        <th>Last</th>
        <th>Odd</th>
        <th>Name</th>
        <th>City</th>
        <th>Country</th>
    </tr>
    <tr ng-repeat="place in places | orderBy : 'Country'" ng-class-even="'even'" ng-class-odd="'odd'">
        <td>{{$index}}</td>
        <td>{{$first}}</td>
        <td>{{$last}}</td>
        <td>{{$odd}}</td>
        <td>{{place.Name}}</td>
        <td>{{place.City}}</td>
        <td>{{place.Country | uppercase}}</td>
    </tr>
</table>

I can also use an expression to determine the class name within the ng-class directive. This can be don using the {…} inside the directive value. For example, if I want to have a particular class just for even rows I can write a similar expression:

ng-class="{'even': $index % 2 == 0}"
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s