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. angular.js - 各位大神們，你們混合開發，web方式中更推薦用什么框架呀？ react？vue？angular？謝謝～2. angular.js - angularjs的自定義過濾器如何給文字加顏色？3. angular.js使用$resource服務把數據存入mongodb的問題。4. docker-machine添加一個已有的docker主機問題5. javascript - IOS微信audio標簽不能通過touchend播放6. html - 如何用css令背景圖能夠撐滿本身會滾動的頁面？7. 老師百度網盤分享一下WampServer的包啊,我們下載幾kb要下載一天的.8. javascript - htaccess rewrite 的問題9. 自己安裝了apache2.2,但是重啟apache后出錯了，求解！謝謝！10. html5 - vuex 為什么需要action,我發現進行異步操作回調中直接操作mutation也沒有報錯
網公網安備