添加额外的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模型的名称，因为它们与键名中的-不合法。

然后，你可以使用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>