ng-model vs getElementById

Question

我正在閱讀Adam Freeman，Apress的書「Pro AngularJS」。

他創建了一個待辦事項列表的應用程序，您可以在列表中添加自己的東西。在部分 「響應於用戶交互」，第34頁

這裏是模型

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 }] 
}; 

該應用

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

控制器

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

輸入字段

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

，並在模型

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

增加了新的東西，然後他評論我已指定屬性的名稱爲指導，以這條線<input class="form-control" ng-model="actionText" />（第36）

按鈕更新 ，這不是模型的一部分。 ng-model指令將動態地 在控制器範圍內創建屬性， 有效地創建用於處理用戶輸入的動態模型屬性。

他對我們

創建用於 處理用戶輸入動態模型性能的意思。

？

我們是否在名爲actionText的模型中添加了新屬性？ 。我們添加一個「」僞「」屬性，以便控制器可以使用它來獲取輸入值？

如果是這樣的話，那麼爲什麼用ng-model="actionText"而不是僅僅使用普通的舊getElementById？畢竟我們只需要領域的價值。

可以像ng-click getElementById("myInput").value這樣的伎倆，也避免添加不需要的東西到模型？

由於

Answer 1

之一angularjs的特徵是，以抽象的儘可能的DOM的手動操縱的JavaScript。

想象一下，在窗體上有10個字段，必須做getElementById ...... ..在angularjs中它更簡單。你只需要在每種輸入類型和你剛剛使用你的模型的控制器方法中使用ng模型。你甚至不必把它們作爲論據;控制器上的方法將有權訪問模型。

我認爲使用ng-model最終會生成比使用getElementById訪問每個字段值更清晰的代碼。