Angular-UI& Bootstrap:根据类更改类

时间:2013-09-07 21:16:22

标签: angularjs angular-ui twitter-bootstrap-3

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

(注意在课程中添加有效。)

当一个按钮有效时,我想删除“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>

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

1 个答案:

答案 0 :(得分: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