Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中，则该项应恢复其正常外观。
应用或删除CSS样式的最佳方法是什么?
Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如，从固定的字体大小中选择，允许用户自定义前景色和背景颜色等。
应用用户选择/输入的CSS样式的最佳方法是什么?
当前回答
参见下面的示例
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo Changing CSS Classes Conditionally with Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="res/js/controllers.js"></script>
<style>
.checkboxList {
border:1px solid #000;
background-color:#fff;
color:#000;
width:300px;
height: 100px;
overflow-y: scroll;
}
.uncheckedClass {
background-color:#eeeeee;
color:black;
}
.checkedClass {
background-color:#3ab44a;
color:white;
}
</style>
</head>
<body ng-controller="TeamListCtrl">
<b>Teams</b>
<div id="teamCheckboxList" class="checkboxList">
<div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">
<label>
<input type="checkbox" ng-model="team.isChecked" />
<span>{{team.name}}</span>
</label>
</div>
</div>
</body>
</html>
其他回答
Angular提供了许多内置指令，用于有条件地/动态地操纵CSS样式:
ng-class - use when the set of CSS styles is static/known ahead of time ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values. ng-show and ng-hide - use if you only need to show or hide something (modifies CSS) ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM) ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM) ng-disabled and ng-readonly - use to restrict form element behavior ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations
正常的“Angular方式”包括将模型/作用域属性绑定到接受用户输入/操作的UI元素上(即使用ng-model)，然后将该模型属性关联到上面提到的内置指令之一。
当用户更改UI时，Angular会自动更新页面上的相关元素。
Q1听起来像是ng-class的一个很好的例子——CSS样式可以在类中捕获。
ng类接受一个“表达式”，该表达式必须求值为以下其中之一:
用空格分隔的类名字符串 类名数组 类名到布尔值的映射/对象
假设你的项目是使用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-style的一个好例子——CSS样式是动态的，所以我们不能为此定义一个类。
Ng-style接受一个必须求值为的“表达式”:
CSS样式名称到CSS值的映射/对象
举一个人为的例子，假设用户可以在文本框中输入一个颜色名称作为背景色(jQuery的颜色选择器会更好):
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">
为以上两种乐器演奏小提琴。
小提琴也包含了ng-show和ng-hide的例子。如果选中复选框，除了背景颜色变为粉红色之外，还会显示一些文本。如果在文本框中输入'red'，则会隐藏一个div。
当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
当你需要一个或两个属性的简单css样式时，另一个选择:
观点:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="{'background-color': getTrColor(element.myvar)}">
{{ element.myvar }}
</td>
[...more amazing code...]
</tr>
控制器:
$scope.getTrColor = function (colorIndex) {
switch(colorIndex){
case 0: return 'red';
case 1: return 'green';
default: return 'yellow';
}
};
从AngularJS v1.2 rc开始，ng-class甚至ng- atr -class在使用SVG元素时都失败了(它们在之前确实有效，即使是在class属性内部进行正常绑定)
具体来说，这些方法现在都不起作用:
ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"
作为一种变通办法，我不得不使用
ng-attr-otherAttr="{{current==this_element?'active':''}}"
然后使用样式
[otherAttr='active'] {
... styles ...
}
你可以使用三元表达式。有两种方法:
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
还是……
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
