2013-12-23 16 views
7

Ich habe ein Problem, wo ich versuche, den Wert eines Kontrollkästchens in meinem Modell auf den Server zu posten und da das Kontrollkästchen nicht mit dem Formular interagiert wurde, scheint eckig nicht zugeordnet zu haben es ist ein Wert, wenn ich nach dem Wert des Kontrollkästchens frage, kommt es als undefined zurück.AngularJS Checkbox-Modellwert ist undefined

Hier ist mein Markup:

<div class="form-group"> 
    <input id="templateDisable" type="checkbox" ng-model="template.disabled" /> 
    <label for="templateDisable">Disabled</label> 
</div> 

Und hier ist eine verkleinerte Version meiner speichern Aktion auf mein Controller:

$scope.save = function (form) { 
    if (form.$valid) { 
     var formData = new FormData(); 
     // this is the problem line of code 
     formData.append("disabled", $scope.template.disabled); 
     // ... some other stuff 
    } 
}; 

Eigentlich tickt dann das Kontrollkästchen Haken bei, bevor ich die Aktion Ergebnisse speichern Hit in der Eigenschaft template.disabled ist false, was ich ohne manuellen Eingriff erwartet hätte.

Ich habe andere verwandte Fragen gesehen, z.B. AngularJS: Initial checkbox value not in model aber sicher Zeug wie eine einfache Checkbox sollte gebacken werden? Ich sollte nicht unbedingt Anweisungen schreiben müssen, um Checkboxen sicher zu verwalten.

Antwort

9

Dies ist pro Design. Wenn Sie einen Standardwert für Ihr Modell wünschen, sollten Sie es im Controller initialisieren (empfohlen) oder ng-init verwenden.

app.controller('AppController', 
    [ 
     '$scope', 
     function($scope) { 
     $scope.template = { 
      disabled = false 
     }; 
     } 
    ] 
); 
<div class="form-group"> 
    <input type="checkbox" ng-model="template.disabled" ng-init="template.disabled=false" /> 
    <label>Disabled</label> 
</div> 
+0

Welchen Vorteil hat es, die Modelleigenschaften undefiniert zu lassen? –

+1

Ich würde sagen, dass es mehrere gibt. a) Das Modell wird nicht implizit geändert, indem es einfach an ein Steuerelement angehängt wird. Das wäre schlechtes Design, IMHO. b) Die Konsistenz bleibt erhalten, denn wenn das Kontrollkästchen standardmäßig auf "false" gesetzt wurde, dann muss die Eingabe des Textes auch den Anfangswert auf die leere Zeichenfolge "" setzen, um die Konsistenz zu gewährleisten. Aber das wäre auch schlechtes Design. – Stewie

+0

Wie @NeilAtkinson unten darauf hingewiesen, wird dies immer den Wert auf false setzen, auch wenn es an erster Stelle wahr war. –

6

Im Folgenden wird der Zustand wieder auf „ungeprüft“ immer gesetzt, wenn die Seite geladen wird (oder aktualisiert). Mit anderen Worten, es überschreibt die tatsächliche Auswahl des Benutzers, wenn die Seite aktualisiert wird.

<input type="checkbox" ng-model="template.disabled" 
ng-init="template.disabled=false" /> 

Wenn Sie jedoch das Kontrollkästchen Zustand in einen Grundzustand setzen wollen zunächst und Sie wollen, dass es auch die folgenden, Benutzer-Interaktionen erinnern, dann ist das, was Sie wollen.

<input type="checkbox" ng-model="template.disabled" 
ng-init="template.disabled = template.disabled || false" /> 
Verwandte Themen