我在使用angular bootstrap-ui btn-checkBox指令及其与ng-repeat指令的交互方面遇到了一些麻烦.指令的设置方式是您必须为多个复选框方案手动命名每个单独的模型,这在ng-repeat中是不可能的,或者我还没有找到如何完成此操作.
我找到了一个类似于这个问题的答案:
Setting and getting bootstrap radio button inside angular repeat loop
然后分叉了这个问题,以便更好地解释我所看到的问题.
可以查看plunker:
解决方法
您链接的答案是针对此问题的相同解决方案.重复中的每个按钮都需要它自己的模型独特属性.如果它们都设置为相同的模型,就像在plunk $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>