angularjs - ng-repeat 中的 AngularJS Bootstrap UI btn-checkbox

Question

我在使用 angular bootstrap-ui btn-checkbox 指令及其与 ng-repeat 指令的交互时遇到了一些麻烦。该指令的设置方式是您必须为多复选框场景手动命名每个单独的模型，这在 ng-repeat 中是不可能的，或者我还没有找到如何实现这一点。

我找到了一个与这个问题有点相似的答案：

在角度重复循环内设置和获取引导单选按钮

并分叉了 plunker 以更好地解释我所看到的问题。可以查看 plunker：

http://plnkr.co/edit/ddiH78pzqE3fsSoq8gAr?p=preview

Answer 1

您链接的答案与此问题的解决方案相同。重复中的每个按钮都需要它自己独特的模型属性。如果它们全部设置为同一型号，就像在$scope.checkboxModel = {id: 0}检查一个按钮时一样，将全部检查它们。

因此，要赋予每个按钮唯一性，您可以在ng-repeat. 该属性将保存一个在检查时更改的布尔值。所以你的模型看起来像：

$scope.companies = [{"id":2,"name":"A", truthy:false}] // and so on

您无需在控制器中显式设置它 - 只需在按钮元素的模型中声明新属性即可：

<companies ng-repeat="company in companies">
    <button type="button" class="btn"  ng-model="company.truthy" 
      btn-checkbox>{{company.name}}</button>
</companies>

这是笨拙的