ng-repeat中的AngularJS Bootstrap UI btn-checkbox

发布时间：2020-12-17 17:48:30 所属栏目：安全来源：网络整理

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

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

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

Setting and getting bootstrap radio button inside angular repeat loop

然后分叉了这个问题,以便更好地解释我所看到的问题.
可以查看plunker：

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

解决方法

您链接的答案是针对此问题的相同解决方案.重复中的每个按钮都需要它自己的模型独特属性.如果它们都设置为相同的模型,就像在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>

Here’s the plunk

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!