Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中，则该项应恢复其正常外观。
应用或删除CSS样式的最佳方法是什么?
Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如，从固定的字体大小中选择，允许用户自定义前景色和背景颜色等。
应用用户选择/输入的CSS样式的最佳方法是什么?
当前回答
下面是我如何有条件地在禁用按钮上应用灰色文本样式
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
其他回答
从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 ...
}
当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);
}
参见下面的示例
<!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>
下面是我如何有条件地在禁用按钮上应用灰色文本样式
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
