angularjs - Angular-UI 和 Bootstrap : change class based on class

Question

我正在使用 Angular-UI 和 Bootstrap 3。

我有这个 HTML 连接到一个范围(假设范围有一个 $scope.myBtn = "A"，比如说)。

<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="A">A</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="B">B</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="C">C</button>

这会产生三个蓝色按钮，这正是我想要的。单击其中一个按钮时，$scope.myBtn 值将设置为正确的值(例如“B”)，并且该按钮的类将设置为:

<button type="button"
  class="btn btn-primary active" ng-model="myBtn" btn-radio="B">B</button>

(注意在类中添加了 active )。

当一键为 事件 我想删除“btn-primary”类并添加“btn-success”类。我知道我可以这样做(这是我现在实际使用的):

<button
  type      = "button"
  class     = "btn"
  ng-class  = "{
    'btn-primary': myBtn != 'B',
    'btn-success': myBtn == 'B'
  }"
  ng-model  = "myBtn"
  btn-radio = "'B'">B</button>

但这对于每个按钮来说似乎都非常冗长......有没有更好的方法来做到这一点？

Answer 1

您可以使用指令通过观察模型值来有条件地设置类

app.directive('myClass', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('ngModel', function (item) {
                if (scope.myBtn !== 'B') {
                    attrs.$set('class', "btn-primary");
                } else {
                    attrs.$set('class', "btn-success");
                }
            });
        }
    }
});

Working Demo