Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中，则该项应恢复其正常外观。
应用或删除CSS样式的最佳方法是什么?
Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如，从固定的字体大小中选择，允许用户自定义前景色和背景颜色等。
应用用户选择/输入的CSS样式的最佳方法是什么?
当前回答
当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
其他回答
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);
}
这个解决办法对我很管用
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
你可以使用三元表达式。有两种方法:
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
还是……
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
还有一种(将来)有条件地应用样式的方法是有条件地创建有作用域的样式
<style scoped type="text/css" ng-if="...">
</style>
但是现在只有FireFox支持范围样式。
有一件事要注意-如果CSS样式有破折号-你必须删除它们。所以如果你想设置background-color，正确的方法是:
ng-style="{backgroundColor:myColor}"
