Ng-style with condition 使用条件的Ng-style

10 浏览
0 Comments

Ng-style with condition 使用条件的Ng-style

如何在满足指定条件的列表项上应用样式:

        
            {{item.name}}

如何将此样式应用于所选项目。

0
0 Comments

在使用ng-style指令时,有时候需要根据条件动态改变样式。然而,根据ng-style的设计,最好的做法是使用类来实现这一功能。但是,由于JavaScript具有返回最后一个值的能力,我们可以通过条件判断来实现动态样式的更改。

以下是一个示例代码:

<div ng-style="conditional && { 'background' : 'red' } || !conditional && { 'background' : 'green' }"> show me the background </div>

但是,如果我们在运行时更改条件,比如当点击一个按钮时更新条件的值,它并不会更新样式。尽管在检查中我们可以看到条件的更新值。

我仍然建议使用ng-class来处理这个问题,因为这是最好的方法。另外,你也可以通过改变ng-style的写法为ng-style="{'background' : Color.Background }",然后使用$scope.Color = { Background : "red" };来改变背景颜色。

0
0 Comments

Ng-style with condition这个问题的出现的原因是在特定条件下改变元素的样式,但是使用ng-style指令无法满足需求。解决方法是使用ng-class指令来根据条件添加或移除特定的类,从而改变元素的样式。

首先需要创建一个新的类,比如红色背景的类。可以在