Question

我正在尝试使用http://mgcrea.github.io/angular-strap/#/buttons#buttons的复选框示例，但它似乎不适用于ng-repeat。

收音机工作正常：

<div class="btn-group" ng-model="selectedData.locations" bs-radio-group>
        <label class="btn btn-default" ng-repeat="item in data.locations"><input type="radio" class="btn btn-default" value="{{item.Id}}">{{item.Name}}</label>
    </div>

但复选框不会

        <div class="btn-group" ng-model="selectedData.checkbox" bs-checkbox-group>
        <label class="btn btn-default" ng-repeat="item in data.locations"><input type="checkbox" value="{{item.Id}}">{{item.Name}}</label>
    </div>

这只是给出了“破碎的角度”指示符，带有一个按钮和文本{{item.Name}}（包括括号），而不是一个按钮列表。

如果我将value="{{item.Id}}"更改为value="item.Id"，那么它可以正常工作，但它的工作方式就像一个单选按钮，而且模型似乎没有更新。

我怀疑问题出在value=""，但我不明白为什么它不起作用。

有什么建议吗？

修改：这是问题的有效plunker示例。你可以看到收音机工作正常，最后一个例子（来自角带示例）工作正常，但另一个没有。 checkbox3示例具有正确的行为，但模型未更新。

Answer 1

复选框的值为true或false。当您尝试为值分配数字ID时，您将导致错误。在plunkr示例中，复选框值设置为{{button.checkbox.left}}，其值为true或false

$scope.button = {
"toggle": false,
  "checkbox": {
    "left": false,
    "middle": true,
    "right": false
  },
  "radio": 1
};

在HTML

中

<div class="btn-group" ng-model="button.checkbox" bs-checkbox-group>
    <label class="btn btn-default"><input type="checkbox" value="{{button.checkbox.left}}"> Left</label>

看看这个小提琴：

http://jsfiddle.net/bmleite/PQvQ2/

看起来他们正在将标签包裹在一个范围内，在那里移动ng-repeat

使用角度带按钮复选框和ng-repeat

1 个答案: