为什么我的 ng-class 不工作
Why my ng-class is not working
我试图在单击按钮时显示微调器。我有一个工作的 plunker,我正在尝试对其进行一些调整。我的 Plunker is here. I referred this working Plunker 但运气不好。我知道我在这里遗漏了一些小东西。
ng-class="{true: overlay}[madeCall]"
应该是:
ng-class="{overlay: madeCall}"
ng-class
的语法是 {className: Expression}
,如果表达式为真,将应用 class。
overlay
应该在 quotes
中,否则 angular 将在范围内查找 overlay
变量。
ng-class="{true: 'overlay'}[madeCall]"
好的,两个答案都正确指出了一个错误,但逻辑上也有错误。
在您复制的 plunker 中,它应用了一个名为 .grey
的 class,当它为真但与 css 结合使用时,他有例如:.grey .overlay
,结果是期望的。
如果你想复制那个确切的逻辑,你必须添加 .grey
class 并更改你的 css.
例如:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
和html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">
我试图在单击按钮时显示微调器。我有一个工作的 plunker,我正在尝试对其进行一些调整。我的 Plunker is here. I referred this working Plunker 但运气不好。我知道我在这里遗漏了一些小东西。
ng-class="{true: overlay}[madeCall]"
应该是:
ng-class="{overlay: madeCall}"
ng-class
的语法是 {className: Expression}
,如果表达式为真,将应用 class。
overlay
应该在 quotes
中,否则 angular 将在范围内查找 overlay
变量。
ng-class="{true: 'overlay'}[madeCall]"
好的,两个答案都正确指出了一个错误,但逻辑上也有错误。
在您复制的 plunker 中,它应用了一个名为 .grey
的 class,当它为真但与 css 结合使用时,他有例如:.grey .overlay
,结果是期望的。
如果你想复制那个确切的逻辑,你必须添加 .grey
class 并更改你的 css.
例如:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
和html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">