xxxxxxxxxxxxx xxxxxxxxxxxxx - 2 months ago 12
AngularJS Question

ng-if inside ng-repeat won't work

I have this piece of code on my HTML that I fill with Angular:

<table id="myTable">
<tr>
<th>Id</th>
<th>desc</th>
<th>prod kg</th>
<th>index</th>
</tr>
<tr ng-repeat="x in maq" ng-if="{{ x.index }}=='0'" id="{{ x.index }}">
<td style="border: 1px solid black;">{{ x.codigo }}</td>
<td style="border: 1px solid black;">{{ x.desc }}</td>
<td style="border: 1px solid black;">{{ x.prod_24_h_kg }}</td>
<td style="border: 1px solid black;">{{ x.index }}</td>
</tr>
</table>


No problem here so far. However I want to make and ng-if for each row as you can see, and let's say:


{{ x.index }}=='0'


I don't want that row to show up. I have tried many combinations of the " " and ' ' with no succes. Does anyone see the solution?

Answer

No need to use interpolation {{}} directive inside ng-if directive, It directly takes an expression which will evaluate against current scope.

ng-if="x.index ==0"

Rather another option to achieve same thing would be use filter.

ng-repeat="x in maq | filter: {index: 0} as filterdMaq"

Same filtering thing can happen inside controller which would help to improve performance as well.

$http.get('someUrl').then(function(response){
    var maq = response.data;
    $scope.maq = $filter('filter')(maq, { index: 0}); //filtered maq
});