My goal was to showcase items in a list using Angular js, aiming to arrange the items neatly with 3 items per row by utilizing 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>
Initially, everything worked fine with "ng-show". However, upon trying to switch it with 'ng-if', the desired result wasn't achieved (all 'regions' were displayed without filtering based on $index % 3 == 0). I assumed "ng-if" would be the standard approach for implementing my layout design but couldn't figure out why it failed completely.
Here is the code snippet that caused issues:
<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>
I would greatly appreciate your assistance. Please help me understand this issue better.