Angular 模态：从按钮列表中添加按钮

Question

正在尝试从按钮列表中为每个模式添加按钮。

脚本：

  var buttonList2 = [{displayName: 'Save', class: 'save'},
                     {displayName: 'Cancel', class: 'cancel'}];

Html:

<button class="btn" type="button" ng-repeat = "item in buttonList" ng-class="{{item.class}}">{{item.displayName}}</button>

每个按钮都有自己的 class，所以我在列表中添加了 class 属性。 但是 ng-class 没有看到 {{item.class}}

而且我无法向这些按钮添加功能。我试过这个：

  $('.cancel').attr('ng-click','cancel()');
  $compile($('.cancel'))($scope);
  $('.save').attr('ng-click','save()');
  $compile($('.save'))($scope); 

http://plnkr.co/edit/NeLthqUuZtw0VyVzd0Ig?p=preview

Answer 1

这可能是最好的评论，但我还不能发表评论。

是否有可能/不好的做法：

class="{{item.class}}"

Answer 2

要动态应用 css 类 使用 ng-class="item.class" 而不使用 {{}}。

要向按钮添加回调，您可以向包含特定功能的按钮添加额外的 属性：

var buttonList2 = [
    {displayName: 'Save', class: 'save', callback: function(){alert('saving');}},
    {displayName: 'Cancel', class: 'cancel', callback: function(){alert('cancelling');}}
];

在您的 ng-repeat 中，您可以通过以下方式应用它们：

<button type="button" ng-repeat="item in buttonList2" ng-click="item.callback()" ng-class="item.class">{{item.displayName}}</button>