Angular JS checkbox - Modell nicht standardmäßig false

Ich habe zwei Checkboxen in meinem Angular JS form, wie diese...

<input id="isBackground" type="checkbox" ng-model="addTemplate.data.isBackground">
<input id="repeats" type="checkbox" ng-model="addTemplate.data.repeats">

Wenn ich das Häkchen bei beiden Boxen dann schreiben die $scope an die Konsole, beide Werte auf true gesetzt sind, aber wenn ich nur ankreuzen einer von Ihnen, dann scheint man in die $scope (auf true gesetzt), und die andere ist einfach nicht vorhanden. Es sollte in der $scope und setzen auf 'false' sicher?

InformationsquelleAutor jonhobbs | 2014-01-26

8

Wenn eine Eigenschaft zugewiesen ng-model ist undefined, ng-Modell wird automatisch die Eigenschaft, nach der sich der Wert verändert, zum ersten mal. Es bedeutet, aus der zweiten Zeit auf, Sie werden sehen, dass beide Eigenschaften.

DEMO

Um dies zu vermeiden, können Sie die Standard - false für beide Eigenschaften:
```
app.controller('MainCtrl', function($scope) {
  $scope.isBackground = false;
  $scope.repeats = false;
});
```
DEMO
- Dank Khanh, ich bin überrascht, Sie machten es so, und es verursacht einige Probleme, aber Ihre Lösung funktioniert. Ich Frage mich, warum Sie wählte, um die Bindung an das Modell erst, nachdem Sie überprüft haben es dann deaktiviert. Niemand würde das tun, mit einem Häkchen und legen Sie ein Standard auf den Rahmen macht es sehr schwierig zu erstellen dynamischer form. Vielen Dank für Ihre Hilfe though.
- Sie verweisen Ihre ids für jeden input, ist das beabsichtigt?
- Strickland: Nein, die ids sind nicht notwendig, kopiert und eingefügt von der Frage, vergaß, Sie zu entfernen.
- ordentlich, aber nicht wirklich funktionieren, wenn die Checkboxen werden dynamisch erstellt
- Was meinst du mit "dynamisch erstellt"? Verwenden Sie ng-repeat zum erzeugen der Checkboxen dynamisch oder legen Sie einfach ein html-snippet. Im letzteren Fall, müssen Sie kompilieren Sie Ihre snippet ($compile-service)
- Wenn ng-repeat verwendet wird, um Sie zu erstellen und Sie haben dynamische Namen, siehe meine Antwort. In diesem Fall weiß man nicht, die scope-Werte, so dass Sie nicht setzen Sie diese auf false. In meinem Fall sind die Formulare generiert, die dynamisch mit einem json-Objekt mit einem Typ, einer der Typen ist die checkbox und es hat auch einen Namen. es kann sein, checkBoxA, checkBoxB, optionA, optionB, bob, etc... Sie wissen nicht im Voraus, damit Sie nicht $Umfang.(valuefromJSON)=false. In Zusammenfassung, wenn ich die Generierung von dynamischen Formularen (strings, Checkboxen, etc) kann ich nicht die Logik in den controller wie pro Ihre Beispiel ng-init ist schöner.
- Ihr Fall ist ein weiteres problem. Es ist wirklich nicht zu dieser Frage. Für jedes problem haben wir eine spezifische Lösung und design. BTW, ich glaube, wir können nichts tun, in controller, die wir tun können, in ng-init, es ist nur die Frage, wo Sie Ihren Initialisierungscode. BTW, die Nutzung ng-init ist nicht zu empfehlen: docs.angularjs.org/api/ng/directive/ngInit
- Es ist das gleiche problem, ich möchte legen Sie ein Kontrollkästchen standardmäßig auf "false"! Im Falle der Formulare werden dynamisch generiert. Ich denke, dies ist der perfekte Fall zu verwenden ngInit, seine näher an der Sicht als an dem Modell. Eine andere option wäre, es zu tun, nachdem Sie Daten empfangen, die in der .dann (), um Sie ändern dies auf false, und das wäre mehr generische als Ihre Lösung. Deine Lösung funktioniert nur für statische Checkboxen, das ist alles was ich sage, es ist nichts falsch mit ihm, die Lösung, die ich schrieb Werke für die statische und die dynamische.
- näher an der Sicht als an dem model => der Wert der checkbox wird das Modell und den geeigneten Ort, um seine Standard-Wert ist der controller, nicht der Ansicht. ngInit wie in der Dokumentation sagt: such as for aliasing special properties so dass es einfacher ist, die Ansicht manipulieren, Aber es ist nicht angemessen-Modell Standard-Wert.
- Sorry ich bin nicht einverstanden mit Ihnen. Der springende Punkt bei der ngInit "ng-init-Richtlinie initialisiert application data." ich bin der Initialisierung werden die Werte der Checkboxen. Der ganze Sinn der Richtlinien ist mir eine deklarative Art und Weise der Einstellung der Werte (sein BLICK-MODELL, nachdem alle). Es macht mehr Sinn zu sehen, dass die checkbox "false", neben dessen Erklärung und nicht Graben müssen die controller für den Wert, es kann "falsch" oder was auch immer Wert wie "nicht Einverstanden". Was wäre die Notwendigkeit von Richtlinien (view-Modelle) wenn Sie nur die Verwendung von MVC? Ich bevorzuge das MVVM Weg Sie bevorzugen das MVC-Weg.
InformationsquelleAutor Khanh TO
10

Einer flexibleren Lösung wird ein ng-init-Wert, das funktioniert für dynamische Eigenschaften so gut wie fest, etwas, das akzeptiert die Lösung nicht.
```
<div class="checkbox">
    <label><input type="checkbox" value="" ng-init="formData[field.checkBox]=false" ng-model="formData[field.checkBox]">{{field.name}}</label>
</div>
```
- Liebe es - +1 dynamische Eigenschaften.
- Das ist genau das, was ich suchte. Dank
- Das ist die richtige Lösung.
InformationsquelleAutor Astronaut
5

Können Sie ngTrueValue, und ngFalseValue. Ich habe die Verwendung 1/0 verwenden Sie es entsprechend
```
<input id="isBackground" ng-true-vale="1" ng-false-value="0" type="checkbox" ng-model="addTemplate.data.isBackground">
<input id="repeats" ng-true-vale="1" ng-false-value="0" type="checkbox" ng-model="addTemplate.data.repeats">
```
Vom Docs

ngTrueValue: Der Wert, auf den der Ausdruck sollte gesetzt werden, wenn ausgewählt.

ngFalseValue: Der Wert, auf den der Ausdruck sollte gesetzt werden, wenn nicht ausgewählt.

ODER

Können Sie ngChecked, Wenn der Ausdruck ist truthy, dann spezielle Attribut "checked" gesetzt auf das element
```
<input id="isBackground" ng-checked="addTemplate.data.isBackground == true" type="checkbox" ng-model="addTemplate.data.isBackground">
<input id="repeats" ng-checked="addTemplate.data.repeats == true" type="checkbox" ng-model="addTemplate.data.repeats">
```
- Ich habe versucht, beide ng-false-value="falsch", aber wenn Sie nicht Haken Sie Sie erscheinen Sie nicht in das Modell. Wenn Sie kreuzen Sie beide an und deaktivieren Sie Sie, dann erscheinen Sie in das Modell.
- Ich möchte, dass Sie beide erscheinen im Modell, noch bevor Sie angekreuzt oder nicht angekreuzt Sie.
- Das funktioniert auf 2 Arten wenn? Ich weiß, es wird das Kästchen an, wenn das Modell auf true festgelegt ist, aber standardmäßig wird es es in dem Modell und legen Sie ihn auf false, bevor der Benutzer interagiert mit der checkbox. Ich bin mir nicht sicher, Sie verstehen meine ursprüngliche Frage.
- Sorry Satpal aber das funktioniert immer noch nicht. Wenn ich das Formular abschicken, ohne zu ticken, entweder von Ihnen, dann sind Sie vorhanden, aus dem Modell. Wenn ich das Häkchen beide dann beide erscheinen im Modell. Es ist so, wie Sie sind standardmäßig auf null anstelle von false zurück.
- Vielen Dank für deine Hilfe, Satpal, aber Khanh gefunden zu haben scheint, das problem.
InformationsquelleAutor Satpal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

ODER