Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中，则该项应恢复其正常外观。
应用或删除CSS样式的最佳方法是什么?
Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如，从固定的字体大小中选择，允许用户自定义前景色和背景颜色等。
应用用户选择/输入的CSS样式的最佳方法是什么?
当前回答
这个解决办法对我很管用
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
其他回答
有一件事要注意-如果CSS样式有破折号-你必须删除它们。所以如果你想设置background-color，正确的方法是:
ng-style="{backgroundColor:myColor}"
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);
}
你可以使用三元表达式。有两种方法:
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
还是……
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
参见下面的示例
<!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>
我最近发现还有一个选项，有些人可能会觉得它很有用，因为它允许你在一个样式元素中更改CSS规则——从而避免重复使用angular指令，如ng-style、ng-class、ng-show、ng-hide、ng-animate等。
这个选项使用了带有服务变量的服务，这些服务变量由控制器设置，并由一个我称之为“custom-style”的属性指令监视。这个策略可以用在许多不同的方面，我试图用这个小提琴提供一些一般性的指导。
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);
}
};
});
