Question

我发现了问题AngularJS: Radio buttons do not work with Bootstrap 3的@ user2789093提供了一个笨拙的人，并修改了一些以反映我的问题：http://plnkr.co/edit/sBfSD2?p=info 在角度，我不认为我应该操纵DOM，所以有没有人有任何想法如何设置初始bootstrap3单选按钮检查而不使用jquery来检查输入的ID？

Answer 1

绑定ng-model并设置value属性correctly后，问题似乎不是生成的单选按钮选择的值。只有引导标签期望在进行选择时才应用active类。因此，您可以通过为每个选择添加ng-class来解决此问题：

    <div class="btn-group col-lg-3" data-toggle="buttons">
        <label class="btn btn-default" ng-class="{active: test.currentVal == 'true'}" ng-click="setTransactionDebit('true')">
            <input type="radio" value="true" ng-model="test.currentVal"></input>
            True
        </label>
        <label class="btn btn-default" ng-class="{active: test.currentVal == 'false'}" ng-click="setTransactionDebit('false')">
            <input type="radio" value="false" ng-model="test.currentVal"></input>
            False
        </label>
    </div>

Here is a working fork你的掠夺者。

Answer 2

当模型值等于输入值时，此指令在无线电输入的父元素上设置active类，否则删除active类。

/* Bs radio not setting active class on label because model changes too slowly
 * before $render() in bsRadio inside AngularStrap.  */
myAppDirectives.directive('bsRadioFix',[function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, controller){
            scope.$watch(attrs.ngModel, function(newVal, oldVal){
                elem.parent().toggleClass('active', newVal == attrs.value)
            })
        }
    }
}]);

在Angular中设置初始引导单选按钮

2 个答案: