Question

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

<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}对象的数组。

事实上，没有切换行为。然后，当您单击任何按钮时，模型值（访问）不会更新：）。

Answer 1

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

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

将ng-model绑定到＆＃34; root-level＆＃34; property（即$ scope.visit）保持角度的自动更新/双向数据绑定功能。我不得不将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>

Angular + Bootstrap切换单选按钮

1 个答案: