如何在AngularJS中有条件地应用CSS样式？

如何在AngularJS中有条件地应用CSS样式？

Angular提供了许多内置指令，用于有条件/动态地处理CSS样式：

• ng-class -CSS样式集为静态/提前知道时使用
• ng-style- 在您无法定义CSS类时使用，因为样式值可能会动态更改。考虑样式值的可编程控制。
• ng-show 和 ng-hide- 仅在需要显示或隐藏某些东西时使用（修改CSS）
• ng-if -1.1.5版中的新功能，如果您只需要检查单个条件（修改DOM），则使用ng-switch代替更详细的ng-switch
• ng-switch- 使用而不是使用几个相互排斥的ng-show（修改DOM）
• ng-disabled 和 ng-readonly- 用于限制表单元素的行为
• ng-animate- 版本1.1.4中的新增功能，用于添加CSS3过渡/动画

常规的“角度方式”涉及将模型/范围属性绑定到将接受用户输入/ *** 作（即使用ng-model）的UI元素，然后将该模型属性与上述内置指令之一相关联。

当用户更改UI时，Angular将自动更新页面上的关联元素。

---

Q1对于ng-class来说是一个很好的例子-CSS样式可以在一个类中捕获。

ng-class 接受“表达式”，该表达式必须计算以下值之一：

1. 一串用空格分隔的类名
2. 类名数组
3. 类名到布尔值的映射/对象

假设您的商品是使用ng-repeat在某些数组模型上显示的，并且选中了商品的复选框后，您想应用

pending-delete

该类：

<div ng-repeat="item in items" ng->   ... HTML to display the item ...   <input type="checkbox" ng-model="item.checked"></div>

上面，我们使用ng-class表达式类型＃3-类名的映射/对象为布尔值。

---

Q2听起来很适合ng样式-CSS样式是动态的，因此我们不能为此定义一个类。

ng-style 接受必须计算为以下内容的“表达式”：

1. CSS样式名称到CSS值的映射/对象

对于一个人为的示例，假设用户可以在texbox中输入背景名称的颜色名称（jQuery颜色选择器会更好）：

<div  ng->   ...   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

为上述两者摆弄。

小提琴还包含 ng-show 和 ng-hide
的示例。如果选中此复选框，则除了背景颜色变为粉红色外，还会显示一些文本。如果在文本框中输入“红色”，则div将被隐藏。