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)隔開,在重復(fù)里面把三個(gè)判斷都寫上。
相關(guān)文章:
1. android - NavigationView 的側(cè)滑菜單中如何保存新增項(xiàng)(通過(guò)程序添加)2. 這段代碼既不提示錯(cuò)誤也看不到結(jié)果,請(qǐng)老師明示錯(cuò)在哪里,謝謝!3. 老師 我是一個(gè)沒有學(xué)過(guò)php語(yǔ)言的準(zhǔn)畢業(yè)生 我希望您能幫我一下4. Thinkphp5.1報(bào)錯(cuò)不支持Redis5. php7.3.4中怎么開啟pdo驅(qū)動(dòng)6. ueditor上傳服務(wù)器提示后端配置項(xiàng)沒有正常加載,求助!!!!!7. 提示語(yǔ)法錯(cuò)誤語(yǔ)法錯(cuò)誤: unexpected ’abstract’ (T_ABSTRACT)8. 關(guān)于thinkphp 5.1中,ajax提交數(shù)據(jù)url的格式寫法,加花括號(hào)就出錯(cuò),請(qǐng)老師指點(diǎn)9. tp5 不同控制器中的變量調(diào)用問(wèn)題10. http://run.php.cn/在線PHP程序運(yùn)行結(jié)果不正確
