Properties of ng-repeat

I missed in last article some property of ng-repeat. I am going to talk about those property in this article. There are 6 special properties in ng-repeat.

  • $index
  • $first
  • $middle
  • $last
  • $even
  • $odd

$index: The default value of $index is 0. I am using $index for serial number in current example. It always return number.
$first: It returns true or false. Its boolean type. It return true when element is first. Lets we have some special css or class on first element, then we use $first.
$middle: It returns true or false. Its boolean type. It return true when element is in between first and last.
$last: It returns true or false. Its boolean type. It return true when element is last.
$even: It returns true or false. Its boolean type. It return true when element is even.
$odd: It returns true or false. Its boolean type. It return true when element is odd.

Let’s understand with example. I am using same demo project. Let’s make a change on index.cshtml

$index

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td>{{$index+1}}</td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

serial-no-output

$first

Let’s try to apply some css on first element.

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td><span ng-class="$first?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

$middle

Let’s try to apply some css on middle element.

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td><span ng-class="$middle?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

middle output

$last

Let’s try to apply some css on last element.

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td><span ng-class="$last?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

last output

$even

Let’s try to apply some css on even element.

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td><span ng-class="$even?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

even output

$odd

Let’s try to apply some css on oddelement.

<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td><span ng-class="$odd?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

Output

odd output

Hope this article is helpful.

Tags: , , , , , ,