ng-repeat中的AngularJS Bootstrap UI btn-checkbox

Question

我在使用angular bootstrap-ui btn-checkbox指令及其与ng-repeat指令的交互方面遇到了一些麻烦.指令的设置方式是您必须为多个复选框方案手动命名每个单独的模型,这在ng-repeat中是不可能的,或者我还没有找到如何完成此操作.

我找到了一个类似于这个问题的答案:

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

然后分叉了这个问题,以便更好地解释我所看到的问题.可以查看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>

这是插件