ng-model対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" />（PP 36）

コメントボタンモデルの一部ではない を更新してください。 ng-modelディレクティブは、 コントローラのスコープ内で私のためにプロパティを動的に作成します。 ユーザー入力を処理するために使用される動的モデルプロパティを効果的に作成します。

彼は ハンドルユーザー入力に使用されている動的モデルのプロパティを作成

によって何を意味するのでしょう。

？

actionTextというモデルに新しいプロパティを追加しますか？ 。コントローラが入力値を取得するためにコントローラが使用できるようにプロパティを追加 ""します。

この場合、getElementByIdを使用するだけでなく、ng-model="actionText"を使用するのはなぜですか？結局のところ、フィールドの値だけが必要です。

ng-click getElementById("myInput").valueのような何かがトリックを行い、不要なものをモデルに追加しないようにすることはできますか？

おかげ

Answer 1

はangularjsの特徴の一つは、DOMのマニュアルjavascriptの操作できるだけ抽象的にです。

フォームに10個のフィールドがあり、getElementByIdを実行しなければならないと想像してみてください...これはangularjsではずっと簡単です。各入力タイプにng-modelがあり、モデルを使用するだけのコントローラメソッドが必要です。引数として渡す必要はありません。コントローラ上のメソッドはモデルにアクセスできます。

ng-modelを使用すると、getElementByIdを使用して各フィールドの値にアクセスするよりも、きれいなコードが最終的に生成されると思います。