uib-btn-radio 不适用于 ng-model

Question

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

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);
};

一个工作的 plunker：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

uib-btn-radio not working with ng-model

angular-ui-bootstrap