Speichern einer checkbox-Liste in Angularjs mit Knoten

Will ich speichern und laden Sie eine checkbox-Liste mit binding in angularjs mit einem Knoten-backend. Dieser Frage ALSO (Wie kann ich binden, Liste von checkbox-Werte mit AngularJS?) Antworten, wie kann ich laden Sie die Kontrollkästchen aus einer statischen javascript-Objekt, aber wie kann ich die checkbox-Werte, nachdem der Benutzer diese auswählt?

Ich wollen speichern Sie die checkbox-Werte in einem einzigen Feld aber wie kann ich sagen, schräg binden Sie das Kontrollkästchen Werte in einem einzigen Feld definiert, in einem Modell zu meiner mongodb? Ich kann nicht einfach verwenden, ng-Modell, da es mehrere Checkboxen.

Unnötig zu sagen, dass ich neu bin und zu eckig, so dass jede Hilfe hier sehr dankbar ...

Vielen Dank für jede Hilfe können Sie zur Verfügung stellen.

kseudo

InformationsquelleAutor kSeudo | 2013-10-25
  1. 3

    Fügen Sie einfach ng-model auf Ihre checkbox. Auf diese Weise können Sie die update-Modell in der controller auf jedem Zustand einer checkbox ändern.

    Hier ist ein Beispiel:

    HTML

    <div ng-controller="Ctrl">
    <label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="fruit.name"
   ng-model="fruit.value"
  > {{fruit.name}}
</label>
    <pre>{{fruits| json}}</pre>    
</div>

    JS

    var app = angular.module('app', []);
function Ctrl($scope) {
    $scope.fruits = [{
        name: 'apple',
        value: false
    }, {
        name: 'orange',
        value: false
    }, {
        name: 'pear',
        value: false
    }, {
        name: 'naartjie',
        value: false
    }];
}

    Demo Fiddle

    [BEARBEITEN]

    BTW können wir die Kopie mit angular.copy() Methode. Wenn wir die Taste drücken, wird die neue Kopie von fruits Modell erstellt werden (und senden Sie es zum server als json). Altes Modell fruits bleiben die gleichen:

    $scope.fruitsCopy = [];

 $scope.init = function(){
  $scope.fruitsCopy = angular.copy($scope.fruits );
}

    Zur Konvertierung der Daten in JSon, die ich benutzen würde:

    var jsonData = JSON.stringify($scope.fruitsCopy);

    Demo2 Fiddle

    • Danke für Eure schnellen Antworten Maxim. Ich möchte speichern Sie die checkbox-Werte als json-string in ein Feld von einem Modell. So, wenn der Benutzer auf speichern klickt, wird diese Zeichenfolge generiert wird: [ { name: 'apple', checked: true }, { name: "orange", checked: false } ] und gespeichert werden, um ein Modell wie team.Früchte. Könnten Sie vorschlagen, einige code, wie kann ich die Status-ändern, um dies zu erreichen? Nochmals vielen Dank.
    • Nochmals vielen Dank für Eure super schnellen Antworten Maxim. Wie kann ich pass den Wert bewertet, der von {{Früchte| json}}, um den controller so, dass es gespeichert werden, um eine Modell-Feld z.B."Lebensmittel.Früchte"? Im moment habe ich einfach nicht sehen, wie dieser Wert kann überschritten werden, durch den controller....
    • controller hat $scope.fruits - das ist Ihr Modell und das Modell ändert, wenn Sie lpay mit GUI (in grundlegende Wörter)
    • Ihr nehmt mich etwa vier Stunden, aber endlich habe ich ein Markierungsfeld, mit dem speichern und füllt richtig. Vielen Dank Maxim für die Zeit nehmen, mir zu helfen, mit diesem.
    • Eine Letzte Sache: warum muss ich eine Kopie zu machen von den Früchten Modell? Ich denke, das muss etwas zu tun mit Rahmen, aber ich bin kämpfen, um das zu verstehen...
    • Sie können entfernen Sie es. Seine nur Beispiel, wie Sie wollen Kopie des Modells. Wenn Sie drücken auf senden-button senden Sie Ihr Modell an server.

    InformationsquelleAutor Maxim Shoustin
  2. 0

    Lassen Sie uns sagen, Sie definiert Ihr Modell als solches:

    function Ctrl($scope) {
    $scope.items = [{
      name: 'A',
      checked: false
    }, {
      name: 'B',
      checked: false
    }, {
      name: 'C',
      checked: false
    }, {
      name: 'D',
      checked: false
    }];
}

    Erstellt und ein view für das Modell:

    <ul>
   <li ng-repeat="item in items">
      <label>
        <input type="checkbox" ng-model="item.checked">
        {{item.name}}
      </label>
   </li>
</ul>
<button ng-click="save()">save</button>

    Als Nächstes müssen Sie definieren save Funktion:

    $scope.save = function() {
  //angular.toJson converts array to string, something like
  //'[{"name":"A","checked":false},{"name":"B","checked":true},...]'
  var json = angular.toJson($scope.items);
  //Service is angular service for your model that makes http requests to your backend
  Service.save(json).then(function(){
    //here you can notify user that data is persisted
  }, function() {
    //here you can notify user that there was a problem with request
  });
}

    Und ein einfaches Modell-service:

    .service('Service', function($http) {
   return new function() {
     this.save = function(data) {
       return $http.post('url/to/backend', data);
     }
   }
 });
    InformationsquelleAutor package
Schreibe einen Kommentar