添加額外的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>