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

Question

我发现了一个有问题的@user2789093的 plunkr AngularJS：单选按钮不适用于 Bootstrap 3，并对其进行了一些修改以反映我的问题：http://plnkr.co/edit/sBfSD2?p=info在角度中，我认为我不应该操纵 DOM，所以有没有人对如何在不使用 jquery 检查输入 ID 的情况下将初始 bootstrap3 单选按钮设置为选中有任何想法？

Answer 1

绑定ng-model并正确设置 value 属性后，问题似乎不是生成的单选按钮选择的值。 只是引导标签期望在进行选择时应用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>

这是您的 plunker 的工作叉子。

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)
            })
        }
    }
}]);