7.显示和隐藏指令

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_34354945

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量317

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/oneboi/blog/794114

版权

为什么80%的码农都做不了架构师？>>>

#1. ng-hide

ng-hide指令，用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true")，如下：

div ng-app="" ng-init="click=false">
  <button ng-click="click= !click">我变</button>
  <p ng-hide="click">显示了。</p>
  <p ng-hide="!click">隐藏了。</p>
</div>

#2. ng-show

3. 用ng-if代替ng-hide和ng-show

扩展内容：

当我们面对一些长列表数据,可能会通过默认隐藏,点击显示的形式来展现数据内容，当内容中也会伴随很多数据绑定，这个在页面渲染的时候非常影响性能。

举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将其中100的model通过ng-show设置为不显示,你会发现还是很卡。

然后你试着将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用,这是为什么呢，原因就在于ng-show指令虽然隐藏了但还是会执行其中的所有绑定，而ng-if就不同了，它只会在等于true的时候也就是显示的时候才去执行其中的绑定，这样一来性能就有很大的提高，所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧！

转载于:https://my.oschina.net/oneboi/blog/794114