ng-if和ng-show / ng-hide有什么区别
我试图了解ng-if
和ng-show
/ 之间的区别ng-hide
,但对我来说它们看起来相同。
我应该记住使用一个或另一个来区别吗?
-
ngIf
该
ngIf
指令根据表达式 删除或重新创建
DOM树的一部分。如果赋值为的表达式的ngIf
计算结果为假值,则将元素从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- hide
CSS类或将CSS类添加到元素,可以显示或隐藏该元素。的.ng- hide
CSS类在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-hide
CSS类被添加到class
所述元件上的属性使其成为隐藏。如果为true
,ng- hide
则从元素中删除CSS类,从而使该元素不显示为隐藏状态。
-
什么时候支持ng-if和ng-show / ng-hide?
2021-02-01 关注 0 浏览108 1答案
-
何时支持 ng-if 与 ng-show/ng-hide?
2022-03-22 关注 0 浏览39 1答案
-
angular中ng一if和ng-show/hide 有什么区别?
2020-01-14 关注 0 浏览456 1答案
-
ng-show =“ true”,但仍具有class =“ ng-hide”
2021-02-01 关注 0 浏览82 1答案
-
为什么从ng-show =“!emptyArray”和ng-hide =“ emptyArray”得到不同的结果?
2021-02-01 关注 0 浏览117 1答案
-
AngularJS:ng-show / ng-hide 不适用于`{{ }}`插值
2022-07-28 关注 0 浏览8 1答案
-
AngularJS:ng-show / ng-hide不适用于`{{}}`插值
2021-02-01 关注 0 浏览95 1答案
-
如何使用角度ui路由器进行ng-hide和ng-show视图?
2021-02-01 关注 0 浏览86 1答案
-
角ng-if和ng-show组合
2021-01-31 关注 0 浏览90 1答案
-
在ng-hide / ng-show中是否可能使用复杂的表达式?
2021-02-01 关注 0 浏览81 1答案