Question

我正在尝试使用ui-bootstrap创建一组动态单选按钮但是使用以下代码时，当我选择每个单选按钮时，模型变量没有更新，它们看起来更像是复选框。

HTML：

<div class="panel panel-default">
    <div class="panel-body">
        <span style="position: fixed; padding-top: 7px;">Current Selection: {{getOrdinal(currentSelection + 1)}} repetition</span>
        <button class="right btn btn-default" type="button" ng-click="selectionNumber(1)"><i class="glyphicon glyphicon-plus"></i></button>
        <button class="right btn btn-default" type="button" ng-click="selectionNumber(-1)"><i class="glyphicon glyphicon-minus"></i></button>
        <button class="right btn btn-default" type="button" ng-click="" style="padding:2px 5px"><img src="images/ColourWheel.png" alt="?" style="max-height:28px"></button>
    </div>
    <div class="panel-body">
        <div class="btn-group">
            <label class="btn btn-default" ng-model="currentSelection" uib-btn-radio="$index" ng-repeat="val in getCollection(selections) track by $index" uncheckable>{{getOrdinal($index + 1)}}</label>
        </div>
    </div>
</div>

JS：

$scope.selections = 1;
$scope.currentSelection = 0;

$scope.selectionNumber = function(change) {
    $scope.selections += change;
    $scope.selections = Math.max($scope.selections, 1);
}

$scope.getOrdinal = function(n) {
    var s = ["th", "st", "nd", "rd"];
    var v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
};

$scope.getCollection = function(size) {
    return new Array(size);
};

一名工作人员：https://plnkr.co/edit/AMc4vamjMsTdbc8eK7a7?p=preview

我基于网站（https://angular-ui.github.io/bootstrap/#!#buttons）的示例。但是，即使使用此示例，uib-uncheckable标记也不起作用。

Answer 1

要解决此问题，必须使用$parent指令。这将映射到包含当前范围的范围。

<div class="panel-body">
    <div class="btn-group">
        <label class="btn btn-default" ng-model="$parent.currentSelection" uib-btn-radio="$index" ng-repeat="val in getCollection(selections) track by $index" uncheckable>{{getOrdinal($index + 1)}}</label>
    </div>
</div>

uib-btn-radio不使用ng-model

1 个答案: