为什么ng-show可以和ng-repeat一起工作，而ng-if不能

Why ng-show works with ng-repeat but ng-if doesn't?

本文关键字：工作 ng-if 不能 一起 ng-repeat ng-show 为什么      更新时间：2023-09-26

我有一个简单的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>
下面是一个示例来演示

:http://jsfiddle.net/HB7LU/17269/

这个问题:AngularJS: ng-if不能和ng-click一起工作?

没有给出为什么ng-show工作而ng-if不工作的答案

我猜这是因为Angular的优先级渲染周期。他们可能已经改变了新版本的行为，就像上面有人发布的那样。在像你这样的情况下，我通常为ngRepeat做一个自定义过滤器来切片数组，并根据偏移量(ngRepeat分页)只显示指定数量的项目。我从来没有搞砸使用ngRepeat直接与ngIf或ngShow/Hide，因为它可以得到真正的bug，无论你把它。

  • ngRepeat指令创建并追加新的节点元素。
  • ngShow将允许angular生成一个元素，但之后它将把它的显示设置为none。
  • ngIf不允许angular生成元素

据我所知，ngIf的优先级高于ngRepeat，所以我可以假设字段下面发生的事情是:

  • Angular看到了这个数组。
  • ngIf不知道$index是什么(因为它是ngRepeat的一部分)，所以它的循环只是运行。
  • ngRepeat渲染元素

当ngShow工作时:

  • Angular看到了这个数组。
  • ngRepeat渲染元素
  • ngShow根据指定的条件显示它们。
相关文章：