CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
user3881679
user3881679

Reputation: 81

Get index of row in table using angularJS

I want to get index of each row in this table using angularJS

<table>
<tbody>
  <tr ng-repeat = "cust in costomers">
     <td> cust.name </td>
     <td> cust.phone </td>
     <td> cust.address </td>
  </tr>
</tbody>

I want to have a variable that contains the index of each row not to just display it

Upvotes: 7

Views: 24072

Answers (4)

Roham Tehrani
Roham Tehrani

Reputation: 2989

If you want to use your own variable as index you can use this:

<table>
<tbody>
  <tr ng-repeat = "(index, cust) in costomers">
     <td> {{index}} </td>
     <td> cust.name </td>
     <td> cust.phone </td>
     <td> cust.address </td>
  </tr>
</tbody>

Upvotes: 1

Coanda
Coanda

Reputation: 373

$index works fine when the ng-repeat is not filtered. If you use a filter, it might be better to use indexOf(). Example:

<input type="text" ng-model="filterCustomers" placeholder="search...">
<table>
  <tbody>
    <tr ng-repeat = "cust in costomers | filter:filterCustomers">
      <td> {{costomers.indexOf(cust) + 1}} </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

user3881722
user3881722

Reputation:

you can use $index 

   <tr ng-repeat = "cust in costomers">
     <td> {{$index}} </td>
  </tr>

Upvotes: 12

ryeballar
ryeballar

Reputation: 30098

I think you should be using the <tr> tag to place your ng-repeat directive. You can use ng-repeat's $index property. See ng-repeat's documentation.

<table>
  <tbody>
    <tr ng-repeat = "cust in costomers">
      <td> {{$index}} </td>
      <td> {{cust.name}} </td>
      <td> {{cust.phone}} </td>
      <td> {{cust.address}} </td>
    </tr>
  </tbody>
</table>

Upvotes: 5

Related Questions