介绍Angular.js中ng-if、ng-show和ng-hide的区别

序

大家都知道，在使用anularjs开发前端页面时，经常使用ng-show、ng-hide和ng-if函数来控制页面元素的显示或隐藏。它们之间有什么区别？让我们来看看这篇文章。

实施原则

Ng-show/ng-hide通过修改CSS样式来控制元素的显示和隐藏，对应的DOM元素将一直存在于当前页面中，而ng-if则根据表达式的值动态地在当前页面中添加和删除页面元素。如果赋值表达式的值为false，则将从页面中删除此元素，否则将添加一个元素。Ng-if在创建元素时使用编译后的代码。如果ng-if的内部代码进行了其他方式的修改，那么修改只对本次演示有效，页面元素重新渲染后修改效果会消失，而ng-show/ng-hide则可以保留dom元素上次修改后的状态。

就范围而言，它们之间是有区别的：当一个元素被ng-if从DOM中删除时，其关联的范围也会被破坏。当它重新加入DOM时，会生成一个新的作用域，但是ng-show和ng-hide不会。

通过下面的代码结合浏览器开发工具，可以清楚地看到两者之间的区别：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' ng-app=' app ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' title ng-if ng-show ng-hide/title脚本类型=' text/JavaScript ' class=' library ' src=' http :3358 libs . useso.com/js/angular . js/1 . 2 . 9/angular . min . js '/script/head body div ng-controller=' MainCtrl ' div ng-show=' false ' ng-show=false/div ng-show=' true ' ng-show=true/div div ng

angular.module('app '，[])。控制器(' MainCtrl '，函数($ scope){ })；页面的最终HTML片段如下：

div ng-controller=' MainCtrl ' class=' ng-scope ' div ng-show=' false ' class=' ng-hide ' ng-show=false/div ng-show=' true ' class=' ng-show=true/div！-ngif : true-div ng-if=' true ' class=' ng-scope ' ng-if=true/div！- end ngIf: true -！- ngIf: false - /div由于ng-if/ng-hide(ng-show)的原理差异很大，在某些情况下显示的效果有很大的不同。

正确使用ng-if和ng-show

在使用bootstrap时，我们经常使用按钮组，即btn-group。如果我们仔细观察，会发现一个按钮组的第一个和最后一个按钮都有圆角，如下图所示：

但是中间的纽扣没有圆角，这样更美观。

结合棱角性，有时需要根据一些条件隐藏一些按钮。隐藏第一个或最后一个按钮时，会出现一些小问题。

代码：

div class=' row ' ng-controller=' myCtrl ' div class=' col-LG-offset-1 ' div class=' BTN-group ' Button class=' BTN BTN-primary ' Button 1/Button Button class=' btnbtn-primary ' Button 2/Button class=' btnbtn-primary ' ng-show=' false ' Button 3/Button/div/div如下图所示。

我们发现按钮2的圆角缺失，这与我们预期的结果不一致。

问题是由ng-show引起的，我们知道ng-show只改变一个元素的显示属性，所以如果我们把这个ng-show='false '改成style='display:none '，这个圆角就会消失。

那么我们应该怎么做才能让它呈现圆角呢？

如果我们想要达到显示圆角的效果，就应该使用ng-if，只需要将代码中的ng-show='false '改为ng-if='false '即可。

原因是ng-if会根据表达式的值来决定这个DOM元素的创建和销毁。当表达式返回true时，它被创建；否则，它就被摧毁了。销毁意味着这个DOM元素已经从页面中删除了。

效果如下：

显示圆角，证明按钮3已从页面中删除。

此外，当我们打开开发人员工具时，我们可以发现这个DOM元素真的不存在：

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。