angular checkbox form mit ng-repeat kann nur eine Option auswählen

Question

Ich versuche ein mehrstufiges Formular zu erstellen und Schritt 2 ist eine Reihe von Kontrollkästchen. Hier ist die Form mit Kontrollkästchen:

<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> 

Die Daten für die Kontrollkästchen (event_sub_categories) von einem Server gezogen. Ich muss die Eingaben speichern, die vom Benutzer zu FormData ausgewählt werden. formData wird auf jeder Seite des mehrstufigen Formulars gesammelt und nach allen Formularseiten mit einer Postanforderung eingereicht. Ich bin neu in eckigen und ich bin etwas verwirrt, wie Kontrollkästchen funktionieren.

Frage 1: Ich verstehe, wie ng-Modell mit normalen Textfeldern funktioniert. Aber ich bin mir nicht sicher, wie es mit Checkboxen funktioniert. Ersetzt ng-model das HTML-Name-Element? Das heißt, wenn ich dies über $resource an den Server übergebe, sind die Schlüssel des Datensatzes von ng-model?

Frage 2: Wie kann ich ng-model so benennen, dass es Teil von formData ist, aber damit auch der Name sub_category aus der Datenbank gezogen wird. Das Problem ist, dass mit dem obigen Code nur ein Kontrollkästchen zu einem bestimmten Zeitpunkt ausgewählt werden kann und der Benutzer in der Lage sein soll, viele Kontrollkästchen zu einem bestimmten Zeitpunkt zu überprüfen. Wenn dies nicht möglich ist, wie kann ich die benötigte Funktionalität mit Checkboxen erhalten?

Answer 1

Um mehrere Kontrollkästchen gleichzeitig auswählen zu können, benötigen Sie ein Objekt (eckig), das alle Werte enthält. Ich habe diesen Code in meinen eigenen Anwendungen implementiert und finde es ziemlich einfach für die Funktion, die ihn empfängt, das Objekt zu interpretieren. (Iterieren das Objekt für Wahr/Falsch-Werte überprüft)

Hier ist Ihr <ion-checkbox> Code:

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

Diese subcategory: true/false innerhalb des formData Objekt festgelegt werden für jedes Kontrollkästchen, das angeklickt wird.

Dann alles, was Sie tun müssen, senden Sie das formData Objekt an wo auch immer, auf die gleiche Weise wie zuvor. Hier ist ein Codepen, der die sich ändernden Checkboxen anzeigt, das aktualisierte formData Objekt und das formData Objekt mit dem String.

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

Ich habe meine eigenen Werte für event_sub_categories als ein Beispiel geschaffen, so natürlich diese von Ihrem eigenen

Kommentar anders wäre, wenn Sie Fragen haben.