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

Question

如何在AngularJS中有条件地应用CSS样式？Q1。假设我想要在按下主“删除”按钮之前改变用户标记为删除的每个“项目”的外观。（这种直接的视觉反馈应该消除了对“你确定吗？”对话框的谚语的需要。）用户将检查复选框以指示应删除哪些项目。如果未选中复选框，则该项应恢复为正常状态。应用或删除CSS样式的最佳方法是什么？Q2。假设我想允许每个用户个性化我的网站的呈现方式。例如，从一组固定的字体大小中选择，允许用户可定义的前景色和背景色等。应用用户选择/输入的CSS样式的最佳方法是什么？

Answer 1

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

• ng-class - 当CSS样式集是静态/提前知道时使用

• ng-style - 在无法定义CSS类时使用，因为样式值可能会动态更改。想想风格值的可编程控制。

• ng-show和 ng-hide - 如果你只需要显示或隐藏某些东西就可以使用（修改CSS）

• ng-if - 1.1.2版中的新增功能，如果您只需要检查单个条件（修改DOM），请使用代替更详细的ng-switch

• ng-switch - 使用而不是使用几个互斥的ng-shows（修改DOM）

• ng-disabled和 ng-readonly - 用于限制表单元素行为

• ng-animate - 1.1.4版中的新增功能，用于添加CSS3过渡/动画

正常的“Angular方式”涉及将模型/范围属性绑定到将接受用户输入/操作（即，使用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-class="{'pending-delete': item.checked}">
   ... 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 class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

小提琴兼得以上。

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