【问题标题】:AngularJS Bootstrap UI btn-checkbox in ng-repeatng-repeat 中的 AngularJS Bootstrap UI btn-checkbox
【发布时间】:2013-07-07 15:25:38
【问题描述】:

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

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

Setting and getting bootstrap radio button inside angular repeat loop

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

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

【问题讨论】:

    标签: angularjs angularjs-directive angular-ui


    【解决方案1】:

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

    【讨论】:

    • 另一种选择:&lt;button type="button" class="btn" ng-model="checkboxModel[company.id]" btn-checkbox&gt;{{company.name}}&lt;/button&gt; 尽管@rGil 方法对我来说更有意义。
    • 太棒了,我的问题是我试图创建一个新模型,而不是在 ng-repeat 范围内修改现有模型,这就是为什么我很难理解这个模型。谢谢!
    • 好。您也可以像最初一样创建一个新模型。只需确保它是一个与 ng-repeat 长度相同的数组,并且由 {} 对象填充。喜欢:$scope.checkboxModel = [{},{}]。等等。然后ng-model=checkboxModel.truthy.
    猜你喜欢
    • 1970-01-01
    • 2017-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-14
    • 2023-03-17
    • 2023-03-19
    • 2015-11-10
    相关资源
    最近更新 更多