将Angular布尔值绑定到Bootstrap单选按钮组

Question

我有一个这样的模型：

$scope.user = { is_active: true }

我目前正在我的模板中显示如下：

<form class="form-horizontal">
    <!-- ... -->
    <div class="form-group">
       <label class="col-sm-2 control-label">Is Active</label>

       <div class="btn-group col-sm-5" data-toggle="buttons">
           <label class="btn btn-default">
               <input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
               Active
           </label>
           <label class="btn btn-default">
               <input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
               Inactive
           </label>
       </div>
</form>

在实践中看起来像这样：

如何将{{ user.is_active }}的值绑定到Bootstrap中的此按钮组？我希望根据模型中选择的内容按下正确的按钮。

Answer 1

您可能还想查看Angular's bootstrap ui中的按钮 - 这些按钮旨在与Angular一起干净利用，因此他们直接使用ngModel。

如果你走这条路线，你需要使用ngModel将它添加到你的按钮，如下所示：

<input type="radio" ng-model="user.is_active" name="is_active">

坚持使用默认的Twitter Bootstrap-它使用类active来定义哪个标签是活动的。要设置此项，您可以使用ngClass。例如，当is_active为真时，您想要激活的标签上，您需要这样：

ng-class="{active:user.is_active==true}

要控制值，您需要在标签上使用'ngClick'来切换值。

<label class="btn btn-default"  ng-class="{active:user.is_active==true}" ng-click="setActive(true)">
    <input type="radio">
        Active
</label>
<label class="btn btn-default" ng-class="{active:user.is_active==false}" ng-click="setActive(false)">
     <input type="radio">
         Inactive
 </label>

新功能：

$scope.setActive = function(val) {
    $scope.user.is_active= val;
};

demo fiddle