javascript - angularjs ng-repeat 循環(huán)不同的樣式
問(wè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>
問(wèn)題解答
回答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è)樣式用逗號(hào)隔開(kāi),在重復(fù)里面把三個(gè)判斷都寫上。
相關(guān)文章:
1. objective-c - ios百度地圖定位問(wèn)題2. html - css 如何添加這種邊框?3. javascript - 求助這種功能有什么好點(diǎn)的插件?4. html5 - 如何解決bootstrap打開(kāi)模態(tài)modal窗口引起頁(yè)面抖動(dòng)?5. javascript - 求助關(guān)于js正則問(wèn)題6. javascript - node.js服務(wù)端渲染解疑7. html5 - rudy編譯sass的時(shí)候有中文報(bào)錯(cuò)8. javascript - 關(guān)于定時(shí)器 與 防止連續(xù)點(diǎn)擊 問(wèn)題9. 為何 localStorage、sessionStorage 屬于html5的范疇,但是為何 IE8卻支持?10. 微信開(kāi)放平臺(tái) - Android調(diào)用微信分享不顯示
