AngularJS - Form gute Praxis

Question

Also ich bin neu in AngularJS und ich bin auf der Suche nach guten Code, weil meine Anwendung skalieren wird.

Jetzt habe ich eine Liste von Kompetenzen, die ich von meiner API erhalten werde, und dann muss ich eine Liste mit einem Kontrollkästchen erstellen, so dass der Benutzer aus der Liste auswählen/abwählen und dann senden bilden.

Also wie kann ich das erreichen? Was sollte im ng-Modell jeder Checkbox sein? Sollte ich ein Formular mit allen Werten in false erstellen?

Hier ist mein Controller-Code jetzt:

function Controller(Competence) { 

    var vm = this; 

    vm.competences = []; 

    function initController() { 
     Competence.getAll() 
      .then(function(data) { 
       vm.competences = data; 
     }); 
    } 

    initController(); 

} 

Und hier ist meine Ansicht Code:

<table> 
    <thead> 
     <tr> 
      <th width="90%">Competence</th> 
      <th width="10%">Select</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="competence in vm.competences"> 
      <td>{{ competence.name }}</td> 
      <td><input type="checkbox"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Bisher Ihr Code sieht gut aus. So legen Checkbox Werte, fügen Sie einfach ng-model="competence.selected" zu jedem Checkbox Eingabeelement wie folgt aus:

<input type="checkbox" ng-model="competence.selected"> 

Nun, wenn Sie das Kontrollkästchen wird es competence.selected zu true gesetzt, und wenn Sie es der Wert deaktivieren wird false .

Formular Submission

in einem <form> Tisch Wrap mit einem ng-submit Attribute, und eine Funktion erstellen, das Formular senden:

<form ng-controller="MyCtrl as vm" ng-submit="vm.submitForm()"> 

    <!-- your table here ... --> 

<input type="submit" value="Submit"> 
</form> 

In Ihrem Controller:

vm.submitForm = function(){ 

    vm.competences.forEach(function(competence){ 

     if(competence.selected) console.log(competence); 

     // or POST the competences using the $http service ... 

    }) 

    } 

See JSFiddle auch: Checkbox Demo