第一季度。假设我想在按下主“删除”按钮之前更改用户标记为删除的每个“项目”的外观。 （这种即时的视觉反馈应该消除对众所周知的“你确定吗？”对话框的需要。）用户将选中复选框以指示应该删除哪些项目。如果未选中复选框，则该项目应恢复正常外观。
应用或删除 CSS 样式的最佳方法是什么？
第二季度。假设我想让每个用户个性化我的网站的呈现方式。例如，从一组固定的字体大小中进行选择，允许用户定义前景色和背景色等。
应用用户选择/输入的 CSS 样式的最佳方式是什么？
【问题讨论】：
Angular 提供了许多用于有条件/动态地操作 CSS 样式的内置指令：
正常的“Angular 方式”包括将模型/范围属性绑定到将接受用户输入/操作（即使用 ng-model）的 UI 元素，然后将该模型属性与内置指令之一相关联上文提到的。
当用户更改 UI 时，Angular 会自动更新页面上的关联元素。
ng-class 接受一个“表达式”，其计算结果必须为以下之一：
假设使用某些阵列模型的NG-Repeat将显示您的项目，并且当检查项目的复选框时要应用pending-delete class：
<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 接受必须评估为的“表达式”：
举一个人为的例子，假设用户可以在 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。
【讨论】：
这是我在禁用按钮上有条件地应用灰色文本样式的方法
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styleUrls: [ './app.component.css' ],
template: `
<button
(click)='buttonClick1()'
[disabled] = "btnDisabled"
[ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
{{btnText}}
</button>`
})
export class AppComponent {
name = 'Angular';
btnText = 'Click me';
btnDisabled = false;
buttonClick1() {
this.btnDisabled = true;
this.btnText = 'you clicked me';
setTimeout(() => {
this.btnText = 'click me again';
this.btnDisabled = false
}, 5000);
}
}
这是一个工作示例：
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html
【讨论】：
我建议您使用返回 true 或 false 的函数检查控制器中的条件。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
并在您的控制器中检查条件
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
【讨论】：
您可以使用三元表达式。有两种方法可以做到这一点：
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
或者...
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
【讨论】：
当您需要一个或两个属性的简单 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';
}
};
【讨论】：
我最近发现还有一个选项可能对某些人有用，因为它允许您更改样式元素中的 CSS 规则 - 从而避免重复使用 ng-style、ng 等角度指令-class、ng-show、ng-hide、ng-animate 等。
此选项使用具有服务变量的服务，这些服务变量由控制器设置并由我称为“自定义样式”的属性指令监视。这种策略可以以多种不同的方式使用，我试图通过fiddle 提供一些一般性指导。
var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
var vm = this;
});
app.controller('MainCtrl', function(MainService){
var vm = this;
vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
return {
restrict : 'A',
link : function(scope, element, attr){
var style = angular.element('<style></style>');
element.append(style);
scope.$watch(function(){ return MainService.theme; },
function(){
var css = '';
angular.forEach(MainService.theme, function(selector, key){
angular.forEach(MainService.theme[key], function(val, k){
css += key + ' { '+k+' : '+val+'} ';
});
});
style.html(css);
}, true);
}
};
});
【讨论】：
当我已经将一个类应用于整个表（例如，应用于奇数行<myClass tbody tr:nth-child(even) td> 的颜色）时，我在 table 元素中应用类时发现了问题。似乎当您使用 Developer Tools 检查元素时，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 类。
更新
如果你想将一个类应用到表格中，例如在访问页面时或其他情况下，你可以使用这个结构：
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
基本上，我们需要激活一个 ng-class 是要应用的类和一个真假语句。 True 应用类，而 false 不应用。所以这里我们对页面的路由进行了两次检查，它们之间有一个OR，所以如果我们在/route_a OR我们在route_b，active 类将被应用。
这只是在右边有一个返回真或假的逻辑函数。
所以在第一个示例中，ng-style 受三个语句的限制。如果它们都为假，则不应用样式，但按照我们的逻辑，至少要应用一个，因此，逻辑表达式将检查哪个变量比较为真，因为非空数组始终为真，这将留下一个数组作为返回值，只有一个为真，考虑到我们对整个响应使用 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 Awesome的图标
【讨论】：
span class="circle circle-{{selectcss(document.Extension)}}">
和代码
$scope.selectcss = function (data) {
if (data == '.pdf')
return 'circle circle-pdf';
else
return 'circle circle-small';
};
css
.circle-pdf {
width: 24px;
height: 24px;
font-size: 16px;
font-weight: 700;
padding-top: 3px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-image: url(images/pdf_icon32.png);
}
【讨论】：
看下面的例子
<!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>
【讨论】：
这个解决方案对我有用
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
【讨论】：
另一种（将来）有条件地应用样式的方法是有条件地创建作用域样式
<style scoped type="text/css" ng-if="...">
</style>
但现在只有 FireFox 支持范围样式。
【讨论】：
需要注意的一点是 - 如果 CSS 样式有破折号 - 您必须删除它们。所以如果要设置background-color，正确的做法是：
ng-style="{backgroundColor:myColor}"
【讨论】：
这在不能使用 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
【讨论】：
ng-attr-。
ng-class 不允许您执行逻辑，但 ng-attr-class 可以。它们都有自己的用途，但我敢打赌，很多开发人员都会寻找ng-attr-class。
从 AngularJS v1.2.0rc 开始，ng-class 甚至 ng-attr-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 ...
}
【讨论】：