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

【问题标题】：Set initial bootstrap radio button in Angular在 Angular 中设置初始引导单选按钮
【发布时间】：2013-12-18 22:52:57
【问题描述】：

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

【问题讨论】：

标签： angularjs twitter-bootstrap-3

【解决方案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 的你的 plunker。

【讨论】：

【解决方案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)
            })
        }
    }
}]);

【讨论】：