我如何有条件地在AngularJS中应用CSS样式？
Q1。 假设我想在主“删除”按钮被按下之前改变用户标记为删除的每个“项目”的外观。 （这种直接的视觉反馈应该消除对“你确定吗？”对话框的需求）。用户将检查复选框以指示哪些项目应该被删除。 如果未勾选复选框，该项目应该恢复到正常状态。
什么是应用或删除CSS样式的最佳方式？
Q2。 假设我想让每个用户个性化我的网站呈现方式。 例如，从一组固定的字体大小中进行选择，允许用户可定义的前景色和背景色等。
对用户选择/输入应用CSS样式的最佳方式是什么？
Angular提供了许多内置的指令来有条件地/动态地操作CSS样式：
正常的“角度方式”涉及将模型/范围属性绑定到将接受用户输入/操作（即，使用ng模型）的UI元素，然后将该模型属性与上述内置指令之一相关联。
当用户更改UI时，Angular会自动更新页面上的关联元素。
Q1听起来像是ng级的好例子 - CSS样式可以在课堂中捕获。
ng-class接受一个“表达式”，它必须评估为以下之一：
假设您的项目使用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接受一个“表达式”，它必须评估为：
对于一个人为的例子，假设用户可以在背景颜色的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将隐藏。
当我有一个类已经应用到整个表（例如，应用于奇数行的颜色<myClass tbody tr:nth-child(even) td> ）时，我在表格元素中应用类时发现问题。 看起来，当您使用开发人员工具检查元素时， element.style没有指定样式。 因此，我没有使用ng-class ，而是尝试使用ng-style ，在这种情况下，新的CSS属性确实出现在element.style 。 这段代码适用于我：
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
Myvar是我正在评估的内容，并且在每种情况下，我都会根据myvar值对每个<td>应用样式，以覆盖整个表的CSS类应用的当前样式。
UPDATE
例如，如果您想在表中应用类，则在访问页面或其他情况下，可以使用此结构：
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
基本上，我们需要激活一个ng类是要应用的类和真或假的陈述。 True应用类，而false不应用。 因此，在这里我们对页面的路由和它们之间的OR进行了两次检查，所以如果我们在/route_a 或者我们在route_b ，则将应用活动类。
这工作只是在右侧的逻辑函数返回true或false。
所以在第一个例子中， ng风格受三条语句限制。 如果它们都是假的，没有应用样式，但是按照我们的逻辑，至少有一个将被应用，所以，逻辑表达式将检查哪个变量比较是真的，并且因为非空数组总是为真，那将留下一个数组作为返回并且只有一个是真的，考虑到我们使用OR作为整个响应，剩余的样式将被应用。
顺便说一下，我忘了给你的功能isActive（）：
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
新的更新
在这里，你有我发现真正有用的东西。 当您需要根据变量的值应用一个类时，例如，取决于div内容的图标，可以使用以下代码（在ng-repeat非常有用）：
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
来自Font的图标真棒
当ng-class不能使用时（例如，在样式化SVG时），这很有效：
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
（我认为你需要使用最新的不稳定的Angular来使用ng-attr-，我目前在1.1.4上）
我发表了一篇关于使用AngularJS + SVG的文章。 它讨论了这个问题和许多其他问题。 http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS
链接地址: http://www.djcxy.com/p/88165.html