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

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

• 在静电/提前知道css样式集的情况下使用
• 100-在无法定义CSS类时使用，因为样式值可能会动态更改.考虑可编程控制的风格值.
• 100和101-仅需要显示或隐藏某些内容时使用(修改CSS)
• 100-在1.1.5版中新增，如果只需要判断单个条件(修改DOM)，请使用ngswitch ，而不是更详细的ngswitch
• 100-使用而不是使用多个互斥的ng-show(修改DOM)
• 100和101-用于限制表单元素行为
• 100-1.1.4版中的新功能，用于添加CSS3过渡/动画

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

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

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-类名到布尔值的映射/对象.

ng-style接受"表达式"，该"表达式"的计算结果必须为:

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

例如，假设用户可以在texbox中输入 colored颜色 名称作为背景色(jQuery colored颜色 Select 器会更好):

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

这把小提琴还包含一个ng-show和ng-hide的例子.如果选中复选框，除了背景 colored颜色 变为粉色外，还会显示一些文本.如果在文本框中输入‘red’，则div将隐藏.