javascript - ng-if 不起作用，但 ng-show 起作用

Question

我试图用 Angular js 显示列表中的项目。我希望使用以下代码将项目组织为连续 3 个项目:

  <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>

当我使用“ng-show”时，如果工作正常。但是当我用“ng-if”切换它时，它根本不起作用。 (它显示所有“区域”，并且不使用 $index % 3 == 0 进行过滤)。我认为“ng-if”应该是实现我的布局设计的更标准的方法，但不知道为什么它根本不起作用。

以下是不起作用的代码:

  <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>

你能帮我解决这个问题吗？

Answer 1

现在试图找到答案的人...尝试在与 ng-if 一起使用时首先将 $index (或与 ng-if 使用时遇到问题的任何变量)声明到 Controller 中。如果没有这个 ng-if 可能会创建自己的作用域。有关更多信息，请访问 stackoverflow 上的此问题。

1. Why ng-show works with ng-repeat but ng-if doesn't?
2. ng-if not working, ng-show works