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-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。

ng-if指令从页面中删除内容，ng-show/ng-hide使用CSS的display属性隐藏内容。

如果您想使用:first-child和:last-child伪选择器来设置样式，这是非常有用的。

@EdSpencer是正确的。如果您有很多元素，并且使用ng-if只实例化相关的元素，则可以节省资源。 @CodeHater也有点正确，如果你要经常删除和显示一个元素，隐藏它而不是删除它可以提高性能。

我发现ng-if的主要用例是，如果内容是非法的，它允许我清晰地验证和消除元素。例如，我可以引用一个空图像名称变量，这将抛出一个错误，但如果我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类将从元素中移除，使元素不显示为隐藏状态。