CODEWITHSUNDEEP
javascriptangularjsindexingangularjs-ng-repeatangular-ng-if
Bilal Alam
Bilal Alam

Reputation: 894

$index is tracking elements which are hidden by ng-if

<tr ng-repeat="materialOffer in Vm.materialoffers track by materialOffer.id" 
    ng-if="!materialOffer.containMaterial && $index >= startIndex && $index < endIndex">
</tr>

I have an array of objects named materialoffers. Each element of the array is an object with a property named containMaterial. Some objects have this property null while others have it as an object. I would like to display only those objects which have an object in the containMaterial property. I am also using $index, startIndex and endIndex for pagination. The problem that I am having is that $index is tracking those objects as well that have containMaterial property null for example the array is like this

[{ 
  "object1": {
    containMaterial:obejct;
  }
}, {
  "object2": {
    containMaterial:obejct;
  }
}, {
  "object3": {
    containMaterial:Null;
  }
}, {
  "object4": {
    containMaterial:obejct;
  }
}]

When traversing object4, the $index would be 3 while it should be 2 since object has been hidden by ng-if.

Upvotes: 0

Views: 72

Answers (1)

2ps
2ps

Reputation: 15926

Why not just pre-filter beforehand?

In your HTML:

<tr ng-repeat="materialOffer in Vm.filteredMaterialOffers() track by materialOffer.id"
    ng-if="$index >= startIndex && $index < endIndex">
</tr>

In your JS:

$scope.Vm.filteredMaterialOffers = function () {
    Vm.materialoffers.filter(function (x) {
        return x.containMaterial ;
    });
};

Upvotes: 1

Related Questions