javascript - angularjs ng-repeat 循環(huán)不同的樣式
問題描述
我想實(shí)現(xiàn) 跳轉(zhuǎn)按鈕是紅色,刪除按鈕是藍(lán)色,添加是白色,但是目前這樣循環(huán)的話,全是“btn-warning”這個(gè)樣式,也就是紅色!
angular.module(’demoAPP’).controller(’demoCtrl’, function($scope) { var demoData = [ { 'Name' : '操作', 'action' : '跳轉(zhuǎn)' }, { 'Name' : '操作', 'action' : '刪除' } { 'Name' : '操作', 'action' : '添加' } ] $scope.demo = demoData; });
<table> <tr ng-repeat='item in demo'> <td>{{item.Name}}</td> <td><button type='button' class='btn btn-warning'>{{item.action}}</button></td> </tr> </table>
問題解答
回答1:ng-class應(yīng)該可以搞定。
回答2:ng-class='{’樣式’:item.action==’跳轉(zhuǎn)’}'ng-class='{’樣式’:item.action==’添加’}'ng-class='{’樣式’:item.action==’修改’}'ng-class為true時(shí)執(zhí)行樣式
回答3:ng–class中多個(gè)樣式用逗號隔開,在重復(fù)里面把三個(gè)判斷都寫上。
相關(guān)文章:
1. node.js - mongodb查找子對象的名稱為某個(gè)值的對象的方法2. docker 17.03 怎么配置 registry mirror ?3. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????4. 前端 - @media query 使用出現(xiàn)的問題?5. html5 - datatables 加載不出來數(shù)據(jù)。6. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤?7. 測試自動(dòng)化html元素選擇器元素ID或DataAttribute [關(guān)閉]8. javascript - QQ第三方登錄的問題9. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!10. spring-mvc - spring-session-redis HttpSessionListener失效

網(wǎng)公網(wǎng)安備