AngularJS | ng选择的指令

AngularJS 中的指令是一种用于改变 DOM 行为的模板语言。ng选择的指令是一种特殊的指令，它们根据用户的输入，动态地改变 DOM 元素的显示和隐藏，或者增加一些效果等。

在本篇文章中，我们将会学习 AngularJS 中的 ng选择的指令，并将对每个指令进行举例说明。

ng-show 和 ng-hide

ng-show 和 ng-hide 指令通过条件判断来显示或者隐藏 HTML 元素。当条件为 true 时，ng-show 显示元素，ng-hide 隐藏元素。

<div ng-show="isShow">Hello World!</div>
<div ng-hide="isHide">Hello World!</div>

ng-if

ng-if 指令也是根据条件判断来显示或者隐藏 HTML 元素。但与 ng-show 和 ng-hide 不同的是，当条件为 false 时，ng-if 会完全从 DOM 中移除元素。

<div ng-if="isShow">Hello World!</div>

ng-switch

ng-switch 指令根据表达式的值来切换 HTML 元素。它可以在多个可选择的 HTML 块中切换。

<div ng-switch on="color">
  <div ng-switch-when="red">Red</div>
  <div ng-switch-when="blue">Blue</div>
  <div ng-switch-default>Yellow</div>
</div>

ng-class 和 ng-style

ng-class 和 ng-style 指令可以动态改变元素的 CSS 类和 style 属性。

<div ng-class="{red: isRed}">
  Hello World!
</div>
<div ng-style="{fontSize: isLarge ? '24px' : '12px'}">
  Hello World!
</div>

ng-repeat

ng-repeat 指令将重复一个 HTML 块来显示一个集合的数据。

<ul>
  <li ng-repeat="item in items">{{ item.title }}</li>
</ul>

以上就是 AngularJS 中的 ng选择的指令，希望能对您有所帮助。