为什么ng-show适用于ng-repeat但ng-if不适用？

Question

我有一个简单的ng-repeat，只显示一半的项目。出于某种原因，我得到它与ng-show合作但不与ng-if合作。我不明白为什么？

这有效：

<li ng-repeat="item in items" ng-show="$index < items.length / 2">{{item}}</li>

这不是：

  <li ng-repeat="item in items" ng-if="$index < items.length / 2">{{item}}</li>

这是一个jsfiddle来演示： http://jsfiddle.net/HB7LU/17269/

这个问题：AngularJS: ng-if not working in combination with ng-click?无法解释为什么ng-show在ng-if无效的情况下工作

Answer 1

我猜这是因为Angular的优先级渲染周期。如上所述，他们可能会使用更新的版本更改其行为。 如果像你的一样，我通常会为ngRepeat制作一个自定义过滤器来切割数组，并根据偏移量（ngRepeat分页）显示指定数量的项目。我从来没有直接使用ngRepeat与ngIf或ngShow/Hide混淆，因为无论你转向它，它都会变得非常错误。

• ngRepeat指令创建并附加新节点元素。
• ngShow将允许angular生成一个元素，但之后它会将其显示为none。
• ngIf不允许角度生成元素。

据我所知，ngIf的优先级高于ngRepeat，因此我可以假设该字段下方发生的事情是：

  

  
• Angular看到了数组。
  
• ngIf不知道$ index（因为它是ngRepeat的一部分）是什么，所以它的循环只是运行。
  
• ngRepeat呈现元素。
  

虽然ngShow有效：

  

  
• Angular看到了数组。
  
• ngRepeat呈现元素。
  
• ngShow按指定条件显示它们。