AngularJS ng-if vs ng-show

示例

这些功能在行为上非常相似。区别在于ng-if从DOM中删除元素。如果代码中有很大一部分不会显示，那么ng-if应该走的路是。ng-show将只隐藏元素，但保留所有处理程序。

ng-if

ngIf指令根据表达式删除或重新创建DOM树的一部分。如果分配给ngIf的表达式的值为假，则将元素从DOM中删除，否则将元素的克隆重新插入DOM中。

ng-show

ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。通过删除或添加ng-hide CSS类到元素，可以显示或隐藏该元素。

示例

<div ng-repeat="user in userCollection">
  <p ng-if="user.hasTreeLegs">I am special
    <!-- some complicated DOM -->
  </p>
  <p ng-show="user.hasSubscribed">I am aweosme
    <!-- switch this setting on and off -->
  </p>
</div>

结论

它取决于用法的类型，但通常一个比另一个更合适（例如，如果95％的时间不需要该元素，请使用ng-if；如果需要切换DOM元素的可见性，请使用ng-show）。

如有疑问，请使用ng-if和测试！

注：ng-if创建一个新的隔离范围，而ng-show并ng-hide没有。使用$parent.property如果父作用域属性是不是在它直接访问。