问ng-if和ng-show / ng-hide有什么区别？

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

要使用此功能就能发挥效用:first-child和:last-child伪选择。

gIf

该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范围使用原型继承从其父范围继承。

如果ngModel用于ngIf绑定到父范围中定义的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指令根据提供给该属性的表达式来显示或隐藏给定的HTML元素ngShow。通过移除或添加ng-hideCSS类到元素来显示或隐藏元素。的.ng-hideCSS类在AngularJS预先定义并设定的显示样式为无（使用!important标志）。

<!-- 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-hideCSS类被添加到class元素的属性上，导致它被隐藏。何时true，将ng-hideCSS类从元素中移除，导致元素不显示为隐藏。