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?

the ng-if runs before the ng-repeat... and when it runs, the "x" is undefined... and the whole tr will be removed. You need to improve your logic — Joao Polo, Sep 13 '16 at 13:54
Possible duplicate of [Difference between double and single curly brace in angular JS?](http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js) — deceze, Sep 13 '16 at 13:55

Pankaj Parkar · Accepted Answer · 2016-11-07T17:15:58.010

4

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);
});

edited Nov 07 '16 at 17:15

answered Sep 13 '16 at 13:54

Pankaj Parkar

134,766
23
234
299

Yes, but in the controller I don't know yet what I'm going to filter. All this info comes from a json. Then, with a ionic-slider the user will move through some images, and based on the $INDEX of that image I'll filter with ng-if on the row. I thought this was the best solution. But I'll stand corrected if it's better how you're saying. Thanks again. – 1x2x3x4x Sep 13 '16 at 14:05
1

If the index value is going to change then, you have to perform filtering on slider change event as well.. – Pankaj Parkar Sep 13 '16 at 14:07
Oh yes, I fire that up as well by calling a function this way: But I'm new to Angular, just don't know yet all its powers and where is the best to do stuff. I'm still learning by trying and keep reading around. So, are you saying that I can filter in the "slideHasChanged($index) function? – 1x2x3x4x Sep 13 '16 at 14:08
1

Yes, make sure your are filtering local copy of `maq`. Don't ask for maq on server again – Pankaj Parkar Sep 13 '16 at 14:12
1

I will try that and will let you know. I was retrieving data everytime, I know it's bad, but for now, at least, the data.json will be locally stored. – 1x2x3x4x Sep 13 '16 at 14:15
Hmm, I'm trying to implement the filter when i load the json but for some reason i won't work. This is what I'm trying: http://i.imgur.com/HQXZhIt.png – 1x2x3x4x Sep 13 '16 at 14:47
1

You need to add $filter dependency on your controller function – Pankaj Parkar Sep 13 '16 at 14:48
True, that was stupid on my side. However now I get this: http://i.imgur.com/KKVtEzH.png I'm trying to get the info from a json. – 1x2x3x4x Sep 13 '16 at 14:51
That works like a charm, now I only have to pass the index of the image and do {index: INDEX OF THE IMAGE}, instead of 0 and it'll be 100% dynamic. Thank you once again for your patience. One question, if it's not too much to ask. Let's say my index goes from 0 to 9999. If i filter by 0, it'll bring up, 0, 10, 20, etc. How can I make it to be exactly and only 0, or only 20? etc.. – 1x2x3x4x Sep 13 '16 at 15:03
just have `step="10"` over your slider element, that will add 10 points interval on your slider. In general there is `step` property, I'm not really sure what is there in ionic – Pankaj Parkar Sep 13 '16 at 15:05
Yeah, it doesn't work like that. What I tried to ask, maybe I don't know how to explain, but I want to implement an exact match like in the documentation https://docs.angularjs.org/api/ng/filter/filter but I'm not sure how to implement it in your example. – 1x2x3x4x Sep 13 '16 at 15:27
1

Ok, by adding true at the end of the filter works. It ended up like this: $scope.maq = $filter('filter')(angular.copy($scope.dataCopy), { index:maquina }, true); – 1x2x3x4x Sep 13 '16 at 15:48

score 1 · Answer 2 · answered Sep 13 '16 at 13:54

1

You don't need to use {{ }}. Just print x.index=='0'

answered Sep 13 '16 at 13:54

Evt.V

179
4

ng-if inside ng-repeat won't work

2 Answers2