예제와 함께 AngularJS에서 "ng-model"을 사용하는 방법
제임스 하트만
AngularJ의 ng-model은 무엇입니까?
ng-model은 모델을 나타내는 Angular.JS의 지시문이며 주요 목적은 "뷰"를 "모델"에 바인딩하는 것입니다.
예를 들어, 아래에 표시된 것과 같이 최종 사용자에게 텍스트 상자에 "이름"과 "성"을 입력하도록 요청하는 간단한 페이지를 제공하고 싶다고 가정해 보겠습니다. 그런 다음 사용자가 데이터 모델에 입력한 정보를 저장하도록 하려고 합니다.
ng-model 지시문을 사용하면 "이름"과 "성" 텍스트 상자 필드를 데이터 모델에 매핑할 수 있습니다.
ng-model 지시문은 "뷰"의 데이터와 "모델"의 데이터가 항상 동기화되도록 보장합니다.
ng-model 속성
이 장의 소개 부분에서 설명한 것처럼 ng-model 속성은 모델의 데이터를 사용자에게 표시되는 뷰에 바인딩하는 데 사용됩니다.
ng-model 속성은 다음 용도로 사용됩니다.
- 입력, 텍스트 영역 및 뷰의 선택과 같은 컨트롤을 모델에 바인딩합니다.
- 검증 동작 제공 - 예를 들어, 텍스트 상자에 숫자만 입력할 수 있도록 검증을 추가할 수 있습니다.
- ng-model 속성은 컨트롤의 상태를 유지합니다. (상태란 컨트롤과 데이터가 항상 동기화 상태를 유지해야 함을 의미합니다. 데이터 값이 변경되면 컨트롤의 값도 자동으로 변경되고 그 반대의 경우도 마찬가지입니다.)
ng 모델을 사용하는 방법
1) 텍스트 영역
텍스트 영역 태그는 여러 줄의 텍스트 입력 컨트롤을 정의하는 데 사용됩니다. 텍스트 영역에는 문자 수에 제한이 없으며 텍스트는 고정 너비 글꼴로 렌더링됩니다.
이제 텍스트 영역 컨트롤에 ng-model 지시문을 추가하는 방법에 대한 간단한 예를 살펴보겠습니다.
이 예에서는 컨트롤러에서 뷰로 여러 줄 문자열을 전달하고 해당 값을 텍스트 영역 컨트롤에 연결하는 방법을 보여주고 싶습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</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"라는 멤버 변수를 연결하는 데 사용됩니다.Description”을 “textarea” 컨트롤에 추가합니다. “pDescription” 변수에는 실제로 텍스트 영역 컨트롤에 전달될 텍스트가 포함됩니다. 또한 행=2 및 열=4인 텍스트 영역 컨트롤에 대한 50가지 속성을 언급했습니다. 여러 줄의 텍스트를 표시할 수 있도록 이러한 속성이 언급되었습니다. 이러한 속성을 정의함으로써 텍스트 영역은 이제 4행과 50열을 가지게 되어 여러 줄의 텍스트를 표시할 수 있습니다.
- 여기서는 "p"라는 범위 개체에 멤버 변수를 연결합니다.Description”을 입력하고 변수에 문자열 값을 넣습니다.
- 문자열에 /n 리터럴을 넣어서 텍스트 영역에 표시될 때 텍스트가 여러 줄이 될 수 있도록 합니다. /n 리터럴은 텍스트를 여러 줄로 나누어서 텍스트 영역 컨트롤에서 여러 줄의 텍스트로 렌더링할 수 있습니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
출력에서,
- p에 할당된 값이 명확하게 표시됩니다.Descript범위 객체의 일부인 ion 변수가 텍스트 영역 컨트롤에 전달되었습니다.
- 이후 페이지가 로드될 때 표시됩니다.
2) 입력요소
ng-model 지시문은 텍스트 상자, 체크박스, 라디오 버튼 등의 입력 요소에도 적용할 수 있습니다.
"textbox"와 "checkbox" 입력 유형으로 ng-model을 사용하는 방법의 예를 살펴보겠습니다.
여기에는 "라는 이름을 가진 텍스트 입력 유형이 있습니다.Guru"99"라는 숫자가 표시되고, 체크박스가 두 개 나타나는데, 하나는 기본적으로 선택되어 있고 다른 하나는 선택되어 있지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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 설명 :
- The ng 모델 지시어 이 옵션은 "pname"이라는 멤버 변수를 텍스트 입력 컨트롤에 연결하는 데 사용됩니다. "pname" 변수에는 "Guru"99"라는 값이 텍스트 입력 컨트롤로 전달됩니다. 멤버 변수의 이름은 어떤 이름이든 지정할 수 있습니다.
- 여기서 우리는 멤버 변수 Topics.Controllers에 첨부된 첫 번째 체크박스 "Controllers"를 정의하고 있습니다. 체크박스는 이 체크 컨트롤에 대해 표시됩니다.
- 여기서 우리는 멤버 변수 Topics.Models에 첨부된 첫 번째 체크박스 "Models"를 정의하고 있습니다. 이 체크박스는 이 체크 컨트롤에 대해 표시되지 않습니다.
- 여기서는 "pName"이라는 멤버 변수를 연결하고 문자열 값을 "로 설정합니다.Guru99. "
- "Topics"라는 멤버 배열 변수를 선언하고 두 개의 값을 지정합니다. 첫 번째 값은 "true"이고 두 번째 값은 "false"입니다. 따라서 첫 번째 체크박스의 값이 true이면 이 컨트롤에 대한 체크박스가 표시되고 마찬가지로 두 번째 값이 false이므로 이 컨트롤에 대한 체크박스가 표시되지 않습니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
출력에서,
- pName 변수에 할당된 값이 " 임을 분명히 알 수 있습니다.Guru99 "
- 첫 번째 체크 값이 "참"이므로 통과했고, 체크박스는 "Controllers" 체크박스에 표시됩니다. 마찬가지로 두 번째 값이 거짓이므로 체크박스는 "Models" 체크박스에 표시되지 않습니다.
3) 드롭다운에서 요소를 선택합니다.
ng-model 지시어는 선택 요소에 적용될 수도 있으며 선택 목록의 목록 항목을 채우는 데 사용될 수도 있습니다.
선택 입력 유형과 함께 ng-model을 사용하는 방법에 대한 예를 살펴보겠습니다.
여기에는 "라는 이름을 가진 텍스트 입력 유형이 있습니다.Guru"99"를 입력하면 "컨트롤러"와 "모델"이라는 두 개의 목록 항목이 있는 선택 목록이 나타납니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- The ng 모델 지시어 "Topics"라는 멤버 변수를 선택 유형 컨트롤에 연결하는 데 사용됩니다. 선택 컨트롤 내에서 각 옵션에 대해 첫 번째 옵션에는 Topics.option1, 두 번째 옵션에는 Topics.option2의 멤버 변수를 연결합니다.
- 여기서 우리는 2개의 키-값 쌍을 보유하는 Topics 배열 변수를 정의하고 있습니다. 첫 번째 쌍은 "Controllers" 값을 갖고 두 번째 쌍은 "Models" 값을 갖습니다. 이러한 값은 뷰에서 select 입력 태그로 전달됩니다. 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.
출력:
출력 결과를 보면 pName 변수에 할당된 값이 " 임을 알 수 있습니다.Guru"99"를 보면 선택 입력 컨트롤에 "컨트롤러"와 "모델" 옵션이 있는 것을 알 수 있습니다.
제품 개요
- Angular JS의 모델은 ng-model 지시문으로 표시됩니다. 이 지시문의 주요 목적은 뷰를 모델에 바인딩하는 것입니다. ng-app, ng-controller 및 ng-model 지시문을 사용하여 간단한 컨트롤러를 구축하는 방법.
- ng-model 지시어는 "텍스트 영역" 입력 컨트롤에 연결될 수 있으며 여러 줄 문자열이 컨트롤러에서 뷰로 전달될 수 있습니다.
- ng-model 지시문은 텍스트 및 체크박스 컨트롤과 같은 입력 컨트롤에 연결하여 런타임에 더욱 동적으로 만들 수 있습니다.
- ng-model 지시어는 사용자에게 표시될 수 있는 옵션으로 선택 목록을 채우는 데에도 사용할 수 있습니다.
