angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
<div ng-show="2 + 2 == 5"> 2 + 2 isn't 5, don't show </div> <div ng-show="2 + 2 == 4"> 2 + 2 is 4, do show </div>
ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
<div ng-if="2+2===5"> Won't see this DOM node, not even in the source code </div> <div ng-if="2+2===4"> Hi, I do exist </div>
ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。
当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。
<html ng-app>
<head>
<script src="angular-1.2.25.js"></script>
<script>
function myController($scope)
{
$scope.keyworld = "";
}
</script>
</head>
<body ng-controller="myController">
<input type="text" ng-model="keyworld">
<input type="button" value="clear" ng-click="keyworld=''" ng-show="keyworld !='' ">
</body>
这段代码默认情况下clear按钮不显示；当在text中输入内容时，clear按钮会显示；点击clear按钮时，会清空text中的内容，同时隐藏clear按钮。可以看到使用ng-show和ng-hide功能完全正常。如果将ng-show改成ng-if，点击clear按钮的时候，不能清空text中的内容，也不能隐藏clear按钮。这是因为ng-if会新建或者销毁作用域，很类似于javascript的原型继承。
StackOverflow上这篇文章，也有人提问ng-if和ng-show的差别。这里直接附上结论:
1.ng-if will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. For example, if you bound a click handler to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and your click handler will not work any more, even after ng-if later evaluates to true and displays the element. You will need to reattach the handler.
2.ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to hide/show elements (note: you might need to add your own classes). This way your handlers that were attached to children will not be lost.
3.ng-if creates a child scope while ng-show/ng-hide does not
Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if compared to ng-show/ng-hide. In my experience, the difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.
文章来源：http://blog.csdn.net/aitangyong/article/details/44701769
相关推荐
本文将详细介绍三个常用的Angular指令：ng-if、ng-show/ng-hide以及ng-switch，它们都是用来处理页面内容显示和隐藏的。 1. ng-if： ng-if指令根据指定表达式的值来决定是否在DOM中渲染对应的元素。如果表达式结果...
在Angular.js中，ng-if、ng-show和ng-hide都是用于控制页面元素的可见性，但它们在实现方式和效果上存在显著的差异。首先，让我们深入理解这些指令的工作原理。 **ng-show 和 ng-hide** 这两个指令是通过改变CSS的`...
ng-if同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。 当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从...
`ng-animate`是Angular的一个插件模块，它允许开发者在Angular的特定事件（如`ng-show`、`ng-hide`、`ng-repeat`等）触发时添加动画效果。在使用`ng-animate`之前，需要在HTML入口文件中引入Angular的核心库`angular...
2. 替换`ng-if`为`ng-show`：`ng-show`指令不会创建新的作用域，而是根据表达式的真假来改变元素的可见性。因此，`ng-model`将继续绑定到父作用域的属性，无需使用`$parent`。 这两种方法都能有效地解决`ng-if`中`...
依次使用ng-if和ng-show的Angular 1.x指令。 如果您有很多绑定，并且通常使用ng-show表示dom perf，则出于性能原因通常会使用ng-if。 这样一来，您就可以同时使用ac-if-show="hasValue" 正在安装 使用其中之一 npm...
Vue 中的 v-show 和 v-if 指令的区别 Vue 中的 v-show 和 v-if 指令都是用于控制元素的显示和隐藏的，但它们有着不同的实现机制和应用场景。 v-show 指令是通过修改元素的 CSS 属性来控制显示和隐藏的。当使用 v-...
在实际项目中，`ng-focus`常常与其他AngularJS指令结合使用，例如`ng-show`或`ng-if`来控制元素的显示隐藏，或者`ng-class`来动态地添加或移除CSS类。通过这种方式，我们可以创建出响应用户行为的交互式界面。 在...
此外，`ng-if`指令更进一步，它不仅控制元素的可见性，还会根据表达式的值决定是否在DOM中插入或移除元素，因此`ng-if`可能导致页面重新渲染，性能上相比`ng-show`和`ng-hide`略低。 总的来说，`ng-show`指令是...
对于ng-hide指令，理解其背后的原理和使用场景非常重要，这样开发者才能够充分地利用它来简化代码，提高开发效率。总之，ng-hide是AngularJS中非常实用的一个指令，它为页面内容的动态显示和隐藏提供了一个简单有效...
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
在Vue.js框架中，`v-if` 和 `v-show` 都是用于条件渲染的指令，它们的作用都是根据表达式的值来决定是否渲染元素。然而，它们之间存在一些关键的区别，这些差异对于优化性能和控制页面渲染至关重要。下面将详细探讨...
如果输入不符合规则，可以通过 `ng-show` 或 `ng-if` 来显示错误消息： ```html <input type="email" name="myEmail" ng-model="email" required> <p ng-show="myForm.myEmail.$invalid && myForm.myEmail.$touched...
- 使用 `ng-if` 或 `ng-show/hide`：避免在不必要时渲染元素，减少DOM的复杂性。 - 使用 `$watchCollection` 而不是 `$watch`：监控整个数组的变化，性能更好。 - 避免在 `ng-repeat` 中使用复杂的表达式：这可能...
在本话题中，我们将深入探讨如何结合Bootstrap的`alert`和`confirm`功能，以及如何在其中使用`ng-repeat`进行双层嵌套。 首先，Bootstrap是Twitter开发的一个开源CSS框架，提供了丰富的组件和样式，如模态框、警告...
这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前，DOM已经渲染出来了，之后Vue...
### Vue.js 中 v-if 与 v-show 的详细区别 #### 一、应用场景 - **v-if**：适用于根据条件是否成立来决定是否渲染一个元素及其包含的所有子元素的情况。当条件变化导致不需要显示该元素时，v-if 会直接从 DOM 中移...