css - AngularJS如何判断不同情况设置不同背景色？？

问题描述

比如：

根据

<ul ng-repeat=’node in nodedata’ ><li style='list-style-type:none;'><span uib-popover='{{node.nodeIndex|getNodeNameFliter}}' popover-trigger='mouseenter' type='button' popover-placement='bottom'>{{node.nodeIndex|getNodeNameFliter}}</span> <i style='margin-left:10px;color:green;font-size:20px;'></i></li> </ul>

style='background:green;'`可以根据 node.status不同的值1，2，3，4设置red,yellow,green，black如何实现呢？

在线等，没人会吗？

问题解答

html代码：使用ng-style

<ul ng-repeat=’node in nodedata’><li style='list-style-type:none;'> <span ng- uib-popover='{{node.nodeIndex|getNodeNameFliter}}' popover-trigger='mouseenter' type='button' popover-placement='bottom'>{{node.nodeIndex|getNodeNameFliter}}</span> <i style='margin-left:10px;color:green;font-size:20px;'></i></li> </ul>

js代码：

$scope.setColor = function (status) { var p = ''; if (1 == status) {p = ’red’; } else if (2 == status) {p = ’yellow’; } else if (3 == status) {p = ’green’; } else if (4 == status) {p = ’black’; } return {'background-color': p};};回答2：

据我所知CSS没有这样的功能，CSS最有名的是媒体查询，它可以根据不同的屏幕大小，选用不用的CSS样式。像题主这样的要求，我想只能靠JS配合来实现了。

现在居然还有用行内样式的我的话会这么做<style>.backstyel1{background:red}.backstyel2{background:yellow}.backstyel3{background:green}.backstyel4{background:black}</style>

<span uib-popover='{{node.nodeIndex|getNodeNameFliter}}' popover-trigger='mouseenter' type='button' popover-placement='bottom'>{{node.nodeIndex|getNodeNameFliter}}</span> <i style='margin-left:10px;color:green;font-size:20px;'></i>