I have a table which has a ng-repeat directive in it. It uses a filter to filter out objects not having property qty>0. I need to give a serial no. to each of the rows. Note that the rows are not fixed. If a user changes the qty of a product to make it 0, it is removed from the table.

<table class="table table-striped">
    <tr>
    <th>S.no</th><th>Product Name</th><th>Qty</th><th>Sub-Total</th>
  </tr>
  <tr class="orders" ng-repeat="product in products" ng-if="product.qty">
    <td>{{$index}}</td><td>{{product.name}}</td><td> <input type="number" min="0" ng-blur="product.qty = qty" ng-model="qty" value="{{product.qty}}"> </td> <td>{{product.qty*product.price | currency:"&#8377;"}}</td>
  </tr>
</table>

Now, the problem with this code is that, the $index gives the actual index of the product in the products array. I need it to give the index in the filtered array. How do I do that?

I have a table which has a ng-repeat directive in it. It uses a filter to filter out objects not having property qty>0. I need to give a serial no. to each of the rows. Note that the rows are not fixed. If a user changes the qty of a product to make it 0, it is removed from the table.

<table class="table table-striped">
    <tr>
    <th>S.no</th><th>Product Name</th><th>Qty</th><th>Sub-Total</th>
  </tr>
  <tr class="orders" ng-repeat="product in products" ng-if="product.qty">
    <td>{{$index}}</td><td>{{product.name}}</td><td> <input type="number" min="0" ng-blur="product.qty = qty" ng-model="qty" value="{{product.qty}}"> </td> <td>{{product.qty*product.price | currency:"&#8377;"}}</td>
  </tr>
</table>

Now, the problem with this code is that, the $index gives the actual index of the product in the products array. I need it to give the index in the filtered array. How do I do that?

• javascript
• angularjs
• angularjs-ng-repeat

• Like I saw here stackoverflow./questions/20756694/… You can try this products.indexOf(product) – Anfelipe Commented Oct 24, 2015 at 6:33
• @Anfelipe that i can get through $index as well. I need numbers from 1...n for n rows which may change if user inputs 0 as qty for any product. – Ayush Gupta Commented Oct 24, 2015 at 6:36

2 Answers 2

You can filter the items beforehand as follows:

<tr class="orders" ng-repeat="product in filterItems(products)">
    <td>{{$index}}</td><td>{{product.name}}</td><td> <input type="number" min="0" ng-blur="product.qty = qty" ng-model="qty" value="{{product.qty}}"> </td> <td>{{product.qty*product.price | currency:"&#8377;"}}</td>
</tr>

Controller:

$scope.filterItems = function(items) {
    var filtered_items = [];
    angular.forEach(items, function(item) {
        if(item.qty > 0) {
            filtered_items.push(item)
        }
    })
    return filtered_items;
}

Use filter in ng-repeat:

HTML

<tr class="orders" ng-repeat="product in products | filter: hasQty">
    <td>{{$index}}</td><td>{{product.name}}</td><td> <input type="number" min="0" ng-blur="product.qty = qty" ng-model="qty" value="{{product.qty}}"> </td> <td>{{product.qty*product.price | currency:"&#8377;"}}</td>
</tr>

JS:

$scope.hasQty = function (value) {
    return value.qty > 0
}

Untested.