我正在使用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>
但对于每个按钮来说,这似乎非常冗长......有没有更好的方法来做到这一点?
答案 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 强>