I was trying to display items in a list with Angular js. I hope to organize the items with 3 items in a row with the following code:
<div class='row-fluid' ng-repeat="region in regions" ng-show="$index % 3 == 0">
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index].checked" ng-hide='regions[$index].text == null'> {{regions[$index].text}}
</span>
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index+1].checked" ng-hide='regions[$index+1].text == null'> {{regions[$index+1].text}}
</span>
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index+2].checked" ng-hide='regions[$index+2].text == null'> {{regions[$index+2].text}}
</span>
</div>
If works fine when I use "ng-show". But when I switch it with 'ng-if', it doesn't work at all. (it shows all the 'regions' and does not filter with $index % 3 == 0). I was thinking "ng-if" should be a more standard way to implement my layout design but have no idea why it does not work at all.
Following is the code that won't work:
<div class='row-fluid' ng-repeat="region in regions" ng-if="$index % 3 == 0">
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index].checked" ng-hide='regions[$index].text == null'> {{regions[$index].text}}
</span>
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index+1].checked" ng-hide='regions[$index+1].text == null'> {{regions[$index+1].text}}
</span>
<span class='span4 checkbox'>
<input type="checkbox" ng-model="regions[$index+2].checked" ng-hide='regions[$index+2].text == null'> {{regions[$index+2].text}}
</span>
</div>
Could you please help me with that?
