javascript - Angular modal: add buttons from button list

Question

Trying to add buttons from button list for each modal.

Script:

  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>

Each button has its own class, so I added in list class property. But ng-class doesn't see {{item.class}}

And I can't add functions to these buttons. I tried this:

  $('.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

要动态应用 css 类，请使用ng-class="item.class"without {{}}.

要为您的按钮添加回调，您可以向您的按钮添加一个包含特定功能的附加属性：

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>

Answer 2

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

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

class="{{item.class}}"