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>

添加额外的btn-group onclick

1 个答案: