Добавить дополнительные btn-group onclick

Question

Добавить дополнительные btn-group onclick

0

Как вы можете видеть, у меня есть группа кнопок. Я пытаюсь расширить эту функциональность таким образом, что, когда я нажимаю на любую из трех кнопок (слева, в середине или вправо), соответствующие кнопки (левое, второе или нижнее) отображаются соответственно, как и когда щелкнул:

    <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 и не могу понять, как это сделать. Даже если я получу образец кода для работы, это было бы очень полезно.

user3362364 04 июль 2015, в 05:11

Источник

Теги:

javascript

angularjs

angular-ui

angularjs-ng-repeat

angular-ui-bootstrap

1 ответ

Ещё вопросы

jme11 · Accepted Answer · 2015-07-04T12-53-00.000Z

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>

jme11 04 июль 2015, в 12:53

0

Это круто. Позвольте мне поиграть и вернуться к вам с дальнейшими вопросами :) Большое спасибо
user3362364 04 июль 2015, в 15:00
0

Это сработало для вас?
jme11 06 июль 2015, в 08:14
0

Отлично работает. Извините, я не смог написать вам раньше. Я занялся другим модулем. Большое спасибо :)
user3362364 06 июль 2015, в 10:20
0

Нет проблем, просто регистрация. Удачи с этим!
jme11 06 июль 2015, в 10:22
0

Спасибо еще раз :)
user3362364 06 июль 2015, в 10:44
0

Что мне делать, если я хочу, чтобы rightSub и rightSub2 были постоянно открыты после щелчка?
user3362364 06 июль 2015, в 12:13
0

Вы можете отключить кнопки после первого нажатия. Так, например: если вы хотите убедиться, что после щелчка checkModel.right остается верным, добавьте: ng-disabled = "checkModel.right". Это будет означать, что его нельзя установить в false, поэтому rightSub останется видимым. Это помогает?
jme11 06 июль 2015, в 12:24
0

Я делаю это неправильно? Он полностью отключил RightSub! Вот код: <label class = "btn btn-default" ng-model = "checkModel.rightSub" btn-checkbox ng-if = "checkModel.right" ng-disabled = "checkModel.right"> Right-Sub </ метка>
user3362364 06 июль 2015, в 12:32
0

Да, это неправильно. Вы хотите добавить ng-disabled к кнопке checkModel.right: <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox ng-disabled="checkModel.right">Right</label> таким образом, как только он установлен в true, он станет отключенным.
jme11 06 июль 2015, в 12:35
0

Более того, вы можете сделать: <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox ng-disabled="checkModel.right && checkModel.rightSub">Right</label> . Тогда он будет отключен только в том случае, если он истинен, а rightSub истинен. Таким образом, если вы хотите снова установить право на false, вам просто нужно выйти из rightSub.
jme11 06 июль 2015, в 12:39
0

Это сработало. Спасибо еще раз. Не могу отблагодарить вас достаточно :) :) :)
user3362364 06 июль 2015, в 12:55

Показать ещё 9 комментариев