ng-if inside ng-repeat won't work

Question

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 1

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('data.json').then(function(response){
    $scope.dataCopy = response.data; //this is original copy of an maq.
    //filtered maq
    $scope.maq = $filter('filter')(angular.copy($scope.dataCopy), { index: 0}, true);
});