예제와 함께 AngularJS에서 "ng-model"을 사용하는 방법
제임스 하트만
⚡ 스마트 요약
AngularJS의 `ng-model`은 입력 컨트롤을 `$scope`의 속성에 직접 바인딩합니다.ping 뷰와 모델이 양방향으로 동기화됩니다. 아래 섹션에서는 해당 속성, 세 가지 작동 예시, 그리고 초보자들이 가장 많이 저지르는 오류에 대해 다룹니다.
AngularJS의 ng-model은 무엇입니까?
`ng-model`은 AngularJS에서 모델을 나타내는 디렉티브이며, 주된 목적은 "뷰"를 "모델"에 바인딩하는 것입니다. 사용자가 컨트롤에 입력하는 내용은 모두 해당 컨트롤의 속성에 직접 기록됩니다. $scope그리고 컨트롤러가 해당 속성에 쓰는 내용은 무엇이든 그대로 컨트롤로 다시 전달됩니다.
예를 들어, 아래와 같이 사용자가 텍스트 상자에 "이름"과 "성"을 입력하도록 하는 간단한 페이지를 최종 사용자에게 보여주고 싶다고 가정해 보겠습니다. 그리고 사용자가 입력한 정보를 데이터 모델에 저장하고 싶습니다.
`ng-model` 디렉티브를 사용하면 텍스트 상자의 "이름"과 "성" 필드를 데이터 모델에 매핑할 수 있습니다. 이 디렉티브를 사용하면 이벤트 처리 코드를 한 줄도 작성하지 않고도 "뷰"의 데이터와 "모델"의 데이터가 항상 동기화된 상태로 유지됩니다.
⚠️ 버전 참고: AngularJS(1.x 버전)는 2021년 12월 31일에 지원이 종료되었으며 더 이상 보안 패치를 받지 않습니다. 아래 예제는 여전히 실행되지만, 최신 Angular에서는 동일한 양방향 바인딩을 다음과 같이 작성해야 합니다. [(ngModel)] 또한 FormsModule이 필요합니다.
ng-model 속성
위 섹션에서 설명했듯이, `ng-model` 속성은 모델의 데이터를 사용자에게 표시되는 뷰에 바인딩하는 데 사용됩니다.
ng-model 속성은 다음 용도로 사용됩니다.
- 뷰의 입력란, 텍스트 영역, 선택 영역 등의 컨트롤을 모델에 바인딩합니다.
- 유효성 검사 동작을 제공합니다. 예를 들어 텍스트 상자에 숫자만 입력할 수 있도록 유효성 검사를 추가할 수 있습니다.
- 컨트롤의 상태를 유지합니다. 여기서 상태란 컨트롤과 데이터가 항상 동기화된 상태를 의미합니다. 즉, 데이터 값이 변경되면 컨트롤의 값도 자동으로 변경되고, 그 반대의 경우도 마찬가지입니다.
- 해당 상태를 CSS 클래스로 노출합니다. AngularJS는 이를 추가합니다.
ng-pristine,ng-dirty,ng-validng-invalidng-model을 가진 모든 컨트롤에 적용되므로 폼의 조건부 스타일링이 간편해집니다.
속성을 이해했으니 다음 단계는 가장 자주 접하게 될 세 가지 제어 유형에 해당 속성을 적용하는 것입니다.
ng 모델을 사용하는 방법
1) 텍스트 영역
텍스트 영역 태그는 여러 줄의 텍스트 입력 컨트롤을 정의하는 데 사용됩니다. 텍스트 영역에는 문자 수에 제한이 없으며 텍스트는 고정 너비 글꼴로 렌더링됩니다.
이제 간단한 예제를 통해 텍스트 영역 컨트롤에 ng-model 디렉티브를 추가하는 방법을 살펴보겠습니다. 이 예제에서는 컨트롤러에서 뷰로 여러 줄로 된 문자열을 전달하고 해당 값을 텍스트 영역 컨트롤에 연결하는 방법을 보여드리겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> <textarea rows="4" cols="50" ng-model="pDescription"></textarea> </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS"; }); </script> </body> </html>
Code 설명 :
- The ng 모델 지시어 "p"라는 멤버 변수를 연결합니다.Descript"텍스트 영역" 컨트롤에 "ion"을 추가합니다. "p"Descript"ion" 변수에는 텍스트 영역 컨트롤로 전달되는 텍스트가 저장됩니다.
rows="4"cols="50"속성은 단순히 컨트롤의 크기를 조정하여 여러 줄 텍스트가 제대로 표시되도록 합니다. - 멤버 변수 "p"Descript"이온"에는 여러 줄로 된 값이 할당됩니다.
\n문자열 내부의 이스케이프 시퀀스는 텍스트 영역이 텍스트를 렌더링할 때 텍스트를 두 번째 줄로 강제로 넘기는 역할을 합니다.
출력:
출력 결과를 보면 컨트롤러에 지정된 여러 줄 텍스트가 텍스트 영역 컨트롤에 두 줄로 나뉘어 표시되는 것을 알 수 있습니다. \n 앉는다.
2) 입력요소
`ng-model` 디렉티브는 일반 입력 요소에서도 작동합니다. 아래 예시에서는 텍스트 상자와 두 개의 체크박스를 동시에 바인딩하여 `ng-model`이 문자열 값과 불리언 값을 어떻게 나란히 처리하는지 보여줍니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> Name : <input type="text" ng-model="pname"><br> Topic :<br> <input type="checkbox" ng-model="Topic.Controller">Controller<br> <input type="checkbox" ng-model="Topic.Models">Models </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pname = "Guru99"; $scope.Topic = { Controller: true, Models: false }; }); </script> </body> </html>
Code 설명 :
- `ng-model` 디렉티브는 멤버 변수 "pname"을 텍스트 입력 컨트롤에 연결하고, 속성도 연결합니다.
Topic.ControllerTopic.Models두 개의 체크박스 컨트롤로 이동합니다. - 컨트롤러에서 "pname"에는 문자열이 할당됩니다.Guru99”이고, “Topic” 객체에는 두 개의 불리언 멤버가 주어집니다. ng-model로 바인딩된 체크박스는 항상 불리언 값을 읽고 쓰기 때문에 이러한 현상이 발생합니다.
true체크박스를 선택된 상태로 표시합니다.false명확하게 해줍니다.
출력:
출력에서,
- 값이 할당되었음을 분명히 알 수 있습니다.
pname변수는 "Guru99. " - 첫 번째 경계값은 다음과 같습니다.
true"컨트롤러" 체크박스가 선택되어 있습니다. 마찬가지로 두 번째 값도 다음과 같습니다.false"모델" 체크박스가 선택되어 있지 않습니다.
3) 드롭다운에서 요소를 선택합니다.
`ng-model` 디렉티브는 `select` 요소에도 적용할 수 있으므로 사용자가 선택한 항목이 모델에 저장됩니다.
여기에 "라는 이름을 담을 텍스트 입력란이 있습니다.Guru99"와 "컨트롤러" 및 "모델"이라는 두 개의 목록 항목이 있는 선택 목록입니다.
⚠️ 정정: 위 스크린샷은 원래 목록을 보여주는데, 해당 목록에서는 select 요소가 바로 그 항목에 바인딩되어 있었습니다. Topics 옵션 텍스트를 제공한 객체입니다. 사용자가 옵션을 선택하는 순간 AngularJS는 해당 객체를 덮어씁니다. Topics 선택한 문자열과 함께 두 옵션이 모두 사라집니다. 아래의 수정된 목록은 목록을 하나의 속성에, 선택 항목을 다른 속성에 유지하며, ng-options 목록을 만들기 위해.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> Name : <input type="text" ng-model="pName"><br> Topic :<br> <!-- Topics holds the list; selectedTopic holds the choice --> <select ng-model="selectedTopic" ng-options="t for t in Topics"></select> </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pName = "Guru99"; $scope.Topics = ["Controller", "Models"]; $scope.selectedTopic = $scope.Topics[0]; }); </script> </body> </html>
Code 설명 :
- 텍스트 입력은 바인딩됩니다.
pName그리고 선택 요소는 바인딩됩니다.selectedTopic선택 항목에 자체 모델 속성이 있기 때문에 옵션을 선택해도 목록 자체는 변경되지 않습니다. - The
Topics배열에는 "Controller"와 "Models"라는 두 값이 저장되어 있습니다.ng-options표현식은 해당 배열을 순회하며 항목당 하나의 옵션을 렌더링하므로 세 번째 주제를 추가해도 마크업을 변경할 필요가 없습니다. selectedTopic첫 번째 항목으로 미리 설정되어 있어 드롭다운 메뉴가 빈 행 대신 적절한 기본값으로 열립니다.
출력:
출력 결과를 보면, 할당된 값이 다음과 같음을 알 수 있습니다. pName 변수는 "Guru99"이며, 선택 컨트롤에는 "컨트롤러"와 "모델" 옵션이 있습니다. 작동 예시는 차치하고, 바인딩이 업데이트되지 않는 경우가 있는데 그 이유를 알아두는 것이 좋습니다.
ng-model 바인딩이 가끔 실패하는 이유는 무엇일까요?
보고된 ng-model 문제의 대부분은 AngularJS의 버그가 아니라 스코프와 기본 요소의 작동 방식에서 비롯된 결과입니다.
대표적인 예는 자식 스코프를 생성하는 디렉티브 내부에 바인딩이 배치된 경우입니다. ng-반복ng-if 또는 ng-switch를 사용합니다. 작성 ng-model="name" 자식 스코프에 섀도 복사본이 생성되므로 부모는 편집 내용을 볼 수 없습니다. 대신 객체의 속성에 바인딩하는 것이 좋습니다. ng-model="user.name" — 모든 스코프가 동일한 참조를 가리키도록 유지합니다. 이것이 바로 숙련된 AngularJS 개발자들이 모든 ng-model 표현식에 점을 붙이도록 고집하는 이유입니다.
나머지 대부분은 두 가지 추가적인 원인으로 설명됩니다.
- 컨트롤러 또는 모듈이 누락되었습니다. ng-app 또는 ng-controller의 철자가 틀리면 바인딩은 오류를 발생시키는 대신 아무런 메시지 없이 아무것도 렌더링하지 않습니다.
- AngularJS 외부에서 값이 변경되었습니다. jQuery 핸들러 또는 setTimeout 콜백에서 설정된 값이 다이제스트 주기 외부에 도달하면 뷰는 새로 고쳐지지 않습니다.
$scope.$apply()실행됩니다.
위 세 가지 사항을 확인하면 작동하지 않는 것처럼 보이는 대부분의 바인딩 문제가 해결됩니다.
