2

我正在使用 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>

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

4

1 回答 1

3

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

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

于 2013-09-08T05:09:17.710 回答