添加额外的 btn-group onclick

Question

如您所见，我有一个按钮组。我试图以这样的方式扩展此功能，当我单击三个按钮（左、中或右）中的任何一个时，相应的按钮（左子、中子或右子）分别出现在何时点击：

    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.left-sub" btn-checkbox>Left-Sub</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.middle-sub" btn-checkbox>Middle-Sub</label>
        <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
        <label class="btn btn-primary" ng-model="checkModel.right-sub" btn-checkbox>Right-Sub</label>
        <label class="btn btn-primary" ng-model="checkModel.right-sub-2" btn-checkbox>Right-Sub-2</label>
    </div>

我是 angularJS 的新手，似乎不知道该怎么做。即使我得到一个示例代码来处理，它也会非常有帮助。

Answer 1

首先您需要更改 ng-model 的名称，因为在键名中使用 - 是不合法的。

那么你可以使用 ngIf:

    <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
    <!--This one displays if checkModel.right is true (i.e., if the Right button is checked)-->
    <label class="btn btn-primary" ng-model="checkModel.rightSub" btn-checkbox ng-if="checkModel.right">Right-Sub</label>
    <!--This one displays if checkModel.rightSub is true (i.e., if the Right-Sub button is checked)-->
    <label class="btn btn-primary" ng-model="checkModel.rightSub2" btn-checkbox ng-if="checkModel.rightSub">Right-Sub-2</label>