我试图理解ng-if和ng-show/ng-hide之间的区别，但对我来说它们看起来是一样的。
在选择使用一种或另一种时，我应该记住有什么区别吗?
当前回答
@Gajus Kuizinas and @CodeHater are correct. Here i am just giving an example. While we are working with ng-if, if the assigned value is false then the whole html elements will be removed from DOM. and if assigned value is true, then the html elements will be visible on the DOM. And the scope will be different compared to the parent scope. But in case of ng-show, it wil just show and hide the elements based on the assigned value. But it always stays in the DOM. Only the visibility changes as per the assigned value.
http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview
希望这个例子能帮助你理解范围。 尝试给ng-show和ng-if赋假值，并在控制台中检查DOM。 尝试在输入框中输入值并观察差异。
<!DOCTYPE html>
你好砰砰作响!
<input type="text" ng-model="data">
<div ng-show="true">
<br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
<br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div>
{{data}}
其他回答
事实上，ng-if指令与ng-show指令不同，它创建了自己的作用域，导致了有趣的实际差异:
angular.module('app', []).controller('ctrl', function($scope){ $scope.delete = function(array, item){ array.splice(array.indexOf(item), 1); } }) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='ctrl'> <h4>ng-if:</h4> <ul ng-init='arr1 = [1,2,3]'> <li ng-repeat='x in arr1'> {{show}} <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button> <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button> <button ng-if='show' ng-click='show=!show'>No</button> </li> </ul> <h4>ng-show:</h4> <ul ng-init='arr2 = [1,2,3]'> <li ng-repeat='x in arr2'> {{show}} <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button> <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button> <button ng-show='show' ng-click='show=!show'>No</button> </li> </ul> <h4>ng-if with $parent:</h4> <ul ng-init='arr3 = [1,2,3]'> <li ng-repeat='item in arr3'> {{show}} <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button> <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button> <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button> </li> </ul> </div>
在第一个列表，on-click事件，显示变量，从内部/自己的作用域，被改变了，但ng-if正在观察从外部作用域同名的另一个变量，所以解决方案不工作。对于ng-show，我们只有一个show变量，这就是它工作的原因。要修复第一次尝试，我们应该通过$parent.show引用show from parent/outer scope。
ngIf通过删除或重新创建元素对DOM进行操作。
而ngShow应用css规则来隐藏/显示内容。
对于大多数情况(并非总是如此)，我将总结为，如果你需要一次检查来显示/隐藏东西，使用ng-if，如果你需要根据屏幕上的用户操作显示/隐藏东西(比如选中复选框然后显示文本框，未选中然后隐藏文本框等)，那么使用ng-show
ngIf
ngIf指令根据表达式删除或重新创建DOM树的一部分。如果赋给ngIf的表达式求值为false，则该元素将从DOM中移除，否则该元素的克隆将重新插入DOM中。
<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>
<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>
当使用ngIf删除一个元素时，它的作用域将被破坏，当元素恢复时将创建一个新的作用域。ngIf中创建的作用域使用原型继承继承父作用域。
如果ngIf中使用ngModel绑定到父作用域中定义的JavaScript原语，那么对子作用域中变量的任何修改都不会影响父作用域中的值。
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="data">
</div>
为了避免这种情况，并从子范围内更新父范围内的模型，使用一个对象:
<input type="text" ng-model="data.input">
<div ng-if="true">
<input type="text" ng-model="data.input">
</div>
或者，$parent变量引用父作用域对象:
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="$parent.data">
</div>
ngShow
ngShow指令根据提供给ngShow属性的表达式来显示或隐藏给定的HTML元素。通过在元素上删除或添加ng-hide CSS类来显示或隐藏元素。.ng-hide CSS类是在AngularJS中预定义的，它将显示样式设置为none(使用!重要标志)。
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>
当ngShow表达式的值为false时，ng-hide CSS类被添加到元素的class属性中，使其变为隐藏状态。当为true时，ng-hide CSS类将从元素中移除，使元素不显示为隐藏状态。
ng-if指令从页面中删除内容，ng-show/ng-hide使用CSS的display属性隐藏内容。
如果您想使用:first-child和:last-child伪选择器来设置样式，这是非常有用的。
Ng-show和ng-hide的工作方式相反。但是ng-hide或ng-show与ng-if的区别是，如果我们使用ng-if，那么元素将在dom中创建，而使用ng-hide/ng-show，元素将完全隐藏。
ng-show=true/ng-hide=false:
Element will be displayed
ng-show=false/ng-hide=true:
element will be hidden
ng-if =true
element will be created
ng-if= false
element will be created in the dom.
推荐文章
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)
- 从AngularJS的url中删除片段标识符(# symbol)
- AngularJS For循环与数字和范围
- 如何在AngularJS中进行分页?
- AngularJS $http和$resource
- 如何在AngularJS控制器上运行函数文档准备好了吗?
- 考虑将事件处理程序标记为“被动”以使页面响应更快
- AngularJS ng-class if-else表达式
- 在AngularJS中编写指令时，我如何决定不需要新的作用域、新的子作用域还是新的隔离作用域?
