angularjs ng-repeat loop different styles - angularjs ng-repeat loop different styles

Question

I want to realize that the jump button is red, the delete button is blue, and the add button is white. However, if the current cycle is like this, it will all be in the style of "btn-warning", which is red!

angular.module('demoAPP').controller('demoCtrl', function($scope) {
  var demoData = [
    {
      "Name" : "操作",
      "action" : "跳转"
    },
    {
      "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>

Answer 1

ng-class should do the trick.

Answer 2

ng-class="{'Style':item.action=='Jump'}"
ng-class="{'Style':item.action=='Add'}"
ng-class="{ 'Style':item.action=='Modify'}"
Execute style when ng-class is true

Answer 3

Multiple styles in ng-class are separated by commas, and write all three judgments in the repetition.