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

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图了解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表达式求false则ng-hideCSS类被添加到class所述元件上的属性使其成为隐藏。如果为true，ng-

hide则从元素中删除CSS类，从而使该元素不显示为隐藏状态。

以上是 ng-if和ng-show / ng-hide有什么区别 的全部内容， 来源链接： utcz.com/qa/404583.html

回到顶部