0

저는 Apam Freeman, Apress의 "Pro AngularJS"라는 책을 읽었습니다.ng-model 대 getElementById

그는 할 일 목록 인 앱을 만들고 목록에 나만의 것을 추가 할 수 있습니다. 부분 "사용자 상호 작용에 응답"페이지 여기 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 모델에 새 속성을 추가합니까? . 컨트롤러가 입력 값을 얻기 위해 사용할 수 있도록 ""의사 속성을 추가합니다.

그런 경우라면 getElementById을 사용하지 않고 ng-model="actionText"을 사용해야하는 이유는 무엇입니까? 결국 우리는 필드 값만 필요합니다.

ng-click getElementById("myInput").value과 같은 것이 속임수를 쓰며 원치 않는 물건을 모델에 추가하는 것을 피할 수 있습니까? AngularJS와의 기능

답변

0

하나는 가능한 한 추상적으로 DOM의 수동 자바 스크립트 조작입니다

감사합니다.

폼에 10 개의 필드가 있고 getElementById를 수행해야한다고 상상해보십시오. ... angularjs에서 훨씬 간단합니다. 각 입력 유형과 컨트롤러 모델에서 모델을 사용하기 만하면됩니다. 여러분은 그것들을 인수로 전달할 필요조차 없습니다. 컨트롤러의 메서드는 모델에 액세스 할 수 있습니다.

ng-model을 사용하면 getElementById를 사용하여 각 필드 값에 액세스하는 것보다 더 깨끗한 코드가 궁극적으로 생성된다고 생각합니다.