您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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指令根据提供给属性的表达式 给定的HTML元素ngShow。通过删除ng- hideCSS类或将CSS类添加到元素,可以显示或隐藏该元素。的.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表达式求falseng-hideCSS类被添加class所述元件上的属性使其成为隐藏。如果为trueng- hide则从元素中删除CSS类,从而使该元素不显示为隐藏状态。

其他 2022/1/1 18:13:32 有759人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶