0

Ich lese das Buch "Pro AngularJS" von Adam Freeman, Apress.ng-model versus getElementById

Er erstellt eine App, die eine To-Do-Liste ist, und Sie können Ihre eigenen Dinge auf der Liste hinzufügen. Im Teil "Als Reaktion auf Benutzerinteraktion", Seite 34

Hier ist das Modell

var model = { 
    user: "Adam", 
    items: [{ action: "Buy Flowers", done: false }, 
    { action: "Get Shoes", done: false }, 
    { action: "Collect Tickets", done: true }, 
    { action: "Call Joe", done: false }] 
}; 

die App

var todoApp = angular.module("todoApp", []); 

der Controller

todoApp.controller("ToDoCtrl", function ($scope) { 
    $scope.todo = model; 
    $scope.addNewItem = function (actionText) { 
    $scope.todo.items.push({ action: actionText, done: false }); 
    } 
}); 

das Eingabefeld

<input class="form-control" ng-model="actionText" /> 

und die Schaltfläche, die neue Dinge im Modell

<button ng-click="addNewItem(actionText)">Add</button> 

fügt Und dann sagt er diese Linie <input class="form-control" ng-model="actionText" /> (S. 36)

ich den Namen einer Eigenschaft angegeben haben, für die Richtlinie zu Aktualisieren Sie , die nicht Teil des Modells ist. Die ng-model-Direktive wird dynamisch erstellen die Eigenschaft für mich im Rahmen des Controllers, effektiv erstellen dynamische Modelleigenschaften, die verwendet werden, um Benutzereingabe zu behandeln.

Was bedeutet er von

dynamische Modell-Eigenschaften zu schaffen, die auf Griff Benutzereingabe verwendet werden.

?

Fügen wir dem Modell actionText eine neue Eigenschaft hinzu? . Wir fügen eine "" pseudo "" - Eigenschaft hinzu, so dass der Controller sie verwenden kann, um einen Eingabewert zu erhalten?

Wenn dies der Fall ist, warum verwenden Sie ng-model="actionText" und nicht nur einfach alte getElementById verwenden? Schließlich brauchen wir nur den Wert des Feldes.

Kann etwas wie ng-click getElementById("myInput").value den Trick machen und auch vermeiden, unerwünschte Sachen zum Modell hinzuzufügen?

Dank

Antwort

0

Eines der Merkmale von AngularJS zu abstrahieren, so viel wie möglich die manuelle Javascript Manipulation des DOM ist.

Stellen Sie sich vor, Sie haben 10 Felder in einem Formular und müssen getElementById machen ... ..Es ist viel einfacher in angularjs. Sie müssen nur ng-Modell in jedem Eingabe-Typ haben und auf Ihren Controller-Methoden verwenden Sie einfach Ihr Modell. Sie müssen sie nicht einmal als Argumente übergeben; Die Methode auf dem Controller hat Zugriff auf das Modell.

Ich denke, dass die Verwendung von ng-Modell letztlich einen saubereren Code generieren wird als die Verwendung von getElementById, um auf jeden Feldwert zuzugreifen.