угловая форма флажка с ng-repeat может выбрать только один вариант

Я пытаюсь создать многошаговую форму, а шаг 2 - это набор флажков. Вот форма с флажками:

<form ng-submit="createSubCategory(formData)">
    <div ng-repeat="sub_category in event_sub_categories">
        <ion-checkbox ng-model="formData.sub_category" ng-true-value="'{{sub_category}}'">
          {{sub_category}}</ion-checkbox>
    </div>
    <button type="submit" class="button button-block button-positive">Continue</button>
</form>

Данные для флажков (event_sub_categories) извлекаются с сервера. Мне нужно сохранить входные данные, выбранные пользователем, в formData. formData собирается на каждой странице многошаговой формы и будет отправлен с почтовым запросом после всех страниц формы. Я новичок в angular, и я несколько смущен тем, как работают флажки.

Вопрос 1: Я понимаю, как ng-model работает с обычными текстовыми полями. Но я не уверен, что понимаю, как это работает с флажками. Заменяет ли ng-model элемент имени html? Это означает, что когда я отправляю это на сервер с помощью $resource, ключи данных устанавливаются ng-моделью?

вопрос 2: Как я могу назвать ng-модель, чтобы она была частью formData, но чтобы она также была связана с именем sub_category, извлекаемым из базы данных. Проблема в том, что с приведенным выше кодом в любой момент времени может быть выбран только один флажок, и я хочу, чтобы пользователь мог устанавливать несколько флажков в данный момент времени. Если это невозможно сделать, как я могу получить нужный мне функционал с помощью флажков?


person Philip7899    schedule 14.04.2016    source источник
comment
может что-то вроде этого? jsfiddle.net/t7kr8/211   -  person mani    schedule 15.04.2016
comment
Кроме того, это помечено ionic-framework, поэтому я предполагаю, что вы используете ionic. Вы смотрели на ion-checkbox? ionicframework.com/docs/api/directive/ionCheckbox   -  person mani    schedule 15.04.2016


Ответы (1)


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

Вот ваш <ion-checkbox> код:

<ion-checkbox ng-repeat="sub_category in event_sub_categories" ng-model="formData[sub_category]">

Это установит subcategory: true/false внутри объекта formData для каждого установленного флажка.

Затем все, что вам нужно сделать, это отправить этот объект formData куда угодно, так же, как вы делали это раньше. Вот codepen, который отображает изменение флажков, обновленный объект formData и строковый объект formData.

http://codepen.io/anon/pen/LNdaev?editors=1010

Я создал свои собственные значения для event_sub_categories в качестве примера, поэтому, конечно, они будут отличаться от ваших собственных

Комментарий, если у вас есть какие-либо вопросы.

person theblindprophet    schedule 15.04.2016