ng-if on ng-repeat

[xiaix]

<div id="masterOuterDIV" style="position: absolute;">
   <div id="masterInnerDIV">
       <div>
           <div ng-repeat="site in data.siteDATA">
               <div id="DIV_{{key}}" ng-repeat="(key, value) in site.display" ng-if="'DIV_{{key}}'.indexOf('DIV_u_') == 0">
                   <input id="{{key}}" value="{{value}}" />
               </div>
           </div>
       </div>
   </div>
</div>

This returns nothing:     ng-if="'DIV_{{key}}'.indexOf('DIV_u_') == 0"

This returns everything:   ng-if="'DIV_{{key}}'.indexOf('DIV_u_') < 0"

But it shouldn't:

In my pasted screenshot above, the ng-if should have failed because it should have equated to 0, not < 0

Can I not use an ng-if in an ng-repeat??

[gauravchoudhury]

Hi David,

The nested ng-repeat needs to start with the variable created from its parent.

Check this link for your reference.

[xiaix]

It already is.   Look at the code I pasted.

If you look at the screen shot, notice the ng-if.   That's what's failing.

[xiaix · Accepted solution]

<div id="masterOuterDIV" style="position: absolute;">
   <div id="masterInnerDIV">
       <div>
           <table>
               <tr ng-repeat="site in data.siteDATA">
                   <td ng-repeat="(key, value) in site.display" ng-if="key.indexOf('u_') == 0">
                       <label for="{{key}}">{{site.label}}</label>
                   </td>
                   <td ng-repeat="(key, value) in site.display" ng-if="key.indexOf('u_') == 0">
                       <input id="{{key}}" value="{{value}}" />
                   </td>
               </tr>
           </table>
       </div>
   </div>
</div>

I was using {{key}} when I only needed key.

Doh!