你能用AngularJS进行条件格式化吗？

Question

我有一个包含来自我的控制器的值的元素：

<span>[[myvalue]]</span>

我会根据值改变背景色。例如，值1-5应该是红色的，6-10应该是绿色的。

<span style='background-color: #green'>9</span>
<span style='background-color: #red'>1</span>

要做到这一点，最简单的方法是什么？

Answer 1

正如tymeJV在ngStyle中提到的，您也可以使用ngClass

<span ng-class="{'myClass' : (myValue < 9)}">{{myValue}}</span>

此外，为了促进一些单元测试，我还建议将逻辑放入一个函数中，这样您就可以轻松地进行测试，因为它还使标记更容易阅读。

标记

<span ng-class="{'myClass' : isSpecial(myValue)}">{{myValue}}</span>

控制器

$scope.isSpecial = function(value){ return myValue < 9};

当然，我的例子和你的例子是有点人为的，但可以帮助使事情更容易维护以后。

Answer 2

下面是一个使用ngStyle的示例

<span  ng-style="myStyle(myValue)"> {{myValue}} </span>

主计长：

$scope.myStyle= function(value){
    return parseInt(value) > 5 ? {color: 'green'} : {color: 'red'}
}