Angular + Bootstrap 切换单选按钮答案

【问题标题】：Angular + Bootstrap Toggling Radio ButtonsAngular + Bootstrap 切换单选按钮
【发布时间】：2015-07-14 16:22:15
【问题描述】：

我正在尝试创建一组我想展示切换行为的单选按钮（即，应突出显示所选按钮）。我正在使用以下部分模板：

<h3>{{fullAddress()}}</h3>

<h4 class="control-label">Result of Visit</h4>
<pre>{{visit}}</pre>

<div class="btn-group" data-toggle="visitState">
    <div ng-repeat="option in visitOptions()" class="btn btn-default" ng-value="option.Value" ng-model="$parent.visit">
        {{option.Label}}
    </div>
</div>

控制器很简单：

app.controller("visitCtrl", function($scope, dataContext) {
    var _visit = "NotHome";

    $scope.visit = "NotHome";

    $scope.visitOptions = function() {
        return dataContext.visitOptions();
    };

    $scope.fullAddress = function() {
        var home = dataContext.home();
        var pin = dataContext.pin();

        if( home.Unit == "" ) return pin.StreetAddress;

        return pin.StreetAddress + " #" + home.Unit;
    };
});

dataContext.visitOptions() 只返回一个 {Label, Value} 对象数组。

就目前而言，没有切换行为。再说一次，当您单击任何按钮时，模型值（访问）也不会更新:)。

【问题讨论】：

你能给我们一个jsfiddle或plunker吗

标签： angularjs twitter-bootstrap radio-button toggle

【解决方案1】：

为了他人的利益，我的代码有两个问题：

我包含了 jQuery，它与切换行为相冲突。我不得不删除 jQuery 并包含 ui-bootstrap 来替换 bootstrap 依赖使用的事件驱动功能。

将 ng-model 绑定到“根级”属性（即 $scope.visit）会使 Angular 的自动更新/双向数据绑定功能无法正常工作。我不得不将 ng-model 绑定到 visit.result：

    $scope.visit = { 
        result: "NotHome",
        hadQuestion: false,
        notes: null,
    };

最终的标记非常简单：

<div class="btn-group" data-toggle="visitState">
    <div ng-repeat="option in visitOptions()" class="btn btn-primary" btn-radio="option.Value" ng-model="visit.result">
        {{option.Label}}
    </div>
</div>

【讨论】：