如何在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-switch-使用而不是使用几个互斥的ng-show（修改DOM）
  ng-disabled和 ng-readonly-用于限制表单元素的行为
  ng-animate -1.1.4版中的新功能，用于添加CSS3过渡/动画
  
  

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

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

对于ng-class来说，Q1听起来很不错-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将被隐藏。