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

Question

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

Q1。假设我想要在按下主“删除”按钮之前改变用户标记为删除的每个“项目”的外观。（这种直接的视觉反馈应该消除了对“你确定吗？”对话框的谚语的需要。）用户将检查复选框以指示应删除哪些项目。如果未选中复选框，则该项应恢复为正常状态。

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

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

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

Answer 1

Angular提供了许多内置指令，用于有条件地/动态地操纵CSS样式：ng-class&nbsp;- 当CSS样式集是静态/提前知道时使用ng-style&nbsp;- 在无法定义CSS类时使用，因为样式值可能会动态更改。想想风格值的可编程控制。ng-show和&nbsp;ng-hide&nbsp;- 如果你只需要显示或隐藏某些东西就可以使用（修改CSS）ng-if&nbsp;- 1.1.2版中的新增功能，如果您只需要检查单个条件（修改DOM），请使用代替更详细的ng-switchng-switch&nbsp;- 使用而不是使用几个互斥的ng-shows（修改DOM）ng-disabled和&nbsp;ng-readonly&nbsp;- 用于限制表单元素行为ng-animate&nbsp;- 1.1.4版中的新增功能，用于添加CSS3过渡/动画正常的“Angular方式”涉及将模型/范围属性绑定到将接受用户输入/操作（即，使用ng-model）的UI元素，然后将该模型属性与上述内置指令之一相关联。当用户更改UI时，Angular将自动更新页面上的关联元素。Q1听起来像ng-class的好例子 - CSS样式可以在类中捕获。ng-class接受必须评估为以下之一的“表达式”：一串以空格分隔的类名一组类名类名的映射/对象为布尔值假设您的项目使用某些数组模型的ng-repeat显示，并且当选中项目的复选框时，您想要应用pending-delete该类：<div&nbsp;ng-repeat="item&nbsp;in&nbsp;items"&nbsp;ng-class="{'pending-delete':&nbsp;item.checked}"> &nbsp;&nbsp;&nbsp;...&nbsp;HTML&nbsp;to&nbsp;display&nbsp;the&nbsp;item&nbsp;... &nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;ng-model="item.checked"></div>上面，我们使用ng-class表达式＃3 - 类名的映射/对象到布尔值。Q2听起来像ng风格的好例子 - CSS样式是动态的，所以我们不能为此定义一个类。ng-style接受必须评估为的“表达式”：CSS样式名称的地图/对象到CSS值对于一个人为的例子，假设用户可以在texbox中输入颜色名称作为背景颜色（jQuery颜色选择器会更好）：<div&nbsp;class="main-body"&nbsp;ng-style="{color:&nbsp;myColor}"> &nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;ng-model="myColor"&nbsp;placeholder="enter&nbsp;a&nbsp;color&nbsp;name">小提琴兼得以上。小提琴还包含ng-show和ng-hide的示例。如果选中复选框，则除了背景颜色变为粉红色外，还会显示一些文本。如果在文本框中输入“红色”，则会隐藏div。