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

Question

Q1。假设我想在按下主“删除”按钮之前更改用户标记为删除的每个“元素”的外观。 (这种即时的视觉反馈应该消除了众所周知的“你确定吗？”对话框的需要。)用户将选中复选框以指示应删除哪些元素。如果未选中复选框，则该元素应恢复为正常外观。

应用或移除 CSS 样式的最佳方式是什么？

Q2。假设我想让每个用户个性化我的网站的呈现方式。例如，从一组固定的字体大小中进行选择，允许用户定义前景色和背景色等。

应用用户选择/输入的 CSS 样式的最佳方式是什么？

Answer 1

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

• ng-class - 当 CSS 样式集是静态的/提前已知时使用
• ng-style - 当您无法定义 CSS 类时使用，因为样式值可能会动态更改。想想样式值的可编程控制。
• ng-show 和 ng-hide - 如果您只需要显示或隐藏某些内容(修改 CSS)，请使用
• ng-if - 版本 1.1.5 中的新功能，如果您只需要检查单个条件(修改 DOM)，请使用而不是更冗长的 ng-switch
• ng-switch - 使用而不是使用多个互斥的 ng-shows(修改 DOM)
• ng-disabled 和 ng-readonly - 用于限制表单元素的行为
• ng-animate - 1.1.4 版本新增，用于添加 CSS3 过渡/动画

正常的“Angular 方式”涉及将模型/范围属性绑定(bind)到将接受用户输入/操作的 UI 元素(即，使用 ng-model)，然后将该模型属性关联到内置指令之一上文提到的。

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

---

Q1 听起来像是 ng-class 的一个很好的案例——CSS 样式可以在一个类中捕获。

ng-class 接受必须计算为以下之一的“表达式”:

1. 一串以空格分隔的类名
2. 一组类名
3. 类名到 bool 值的映射/对象

假设您的元素是在某些数组模型上使用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 - 类名到 bool 值的映射/对象。

---

Q2 听起来像是 ng-style 的一个很好的案例——CSS 样式是动态的，所以我们不能为此定义一个类。

ng-style 接受一个必须评估为的“表达式”:

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

举一个人为的例子，假设用户可以在文本框中输入颜色名称作为背景颜色(jQuery 颜色选择器会更好):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

以上两项均为 Fiddle。

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