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. android - 分享到微信,如何快速轉換成字節數組2. javascript - 能否讓vue-cli的express修改express重啟服務3. 解決Android webview設置cookie和cookie丟失的問題4. angular.js - Beego 與 AngularJS的模板格式沖突,該怎么解決?5. javascript - vue2.0中,$refs對象為什么用駝峰的方式獲取不到屬性?6. node.js - npm一直提示proxy有問題7. html5 - 有人做過防微信app界面的H5 demo嗎?8. javascript - 有沒有iOS微信中可以在背景播放視頻的方法?9. 最新版本的微信web開發者工具必須要APPID,會提供測試號,但是像你一樣tabBar配置的話不會顯示首頁與日志,難道我要下載跟你一樣的版本?10. Navicat for mysql 中以json格式儲存的數據存在大量反斜杠,如何去除?
