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如何实现呢?
在线等,没人会吗?
问题解答
回答1: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配合来实现了。
回答3:现在居然还有用行内样式的我的话会这么做<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>
相关文章:
1. vim - docker中新的ubuntu12.04镜像,运行vi提示,找不到命名.2. docker内创建jenkins访问另一个容器下的服务器问题3. angular.js - angularjs 怎么封装 upload 上传4. macos - mac下docker如何设置代理5. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件,使其能够单个改变CSS。6. javascript - vue生成一维码?求助!!!!!急7. 绝对定位和fied定位,键盘弹起对布局的影响8. angular.js - items.query is not a function这是怎么回事9. android 文件File删除问题10. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章
