AngularJS 양방향 데이터 바인딩
AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다.
먼저 jQuery를 사용한 아래 예제를 확인해보자.
InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다.
HTML 파일.
<body>
<input type="text" id="txtText" />
<h1 id="p"></h1>
</body>
Javascript 파일.
$(function(){
$("#txtText").keyup(function() {
$("#p").text($(this).val());
});
});
소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다.
물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수 있다.
AngularJS를 이용하면, 다음 예제와 같이 더욱 더 간단하게 변경할 수 있다.
HTML 파일.
<body ng-controller="ngCtrl">
<input ng-model="text" />
<p>{{ text }}</p>
</body>
Javascript 파일.
var app = angular.module('ngApp', []);
app.controller('ngCtrl', function($scope) {
});
위의 예제에서 확인할 수 있듯이, InputText Element의 ng-model 디렉티브에 text라는 이름을 할당한다.
이렇게 되면, 해당 ngCtrl(AngularJS 컨트롤러)에 text라는 이름으로 InputText의 값이 할당 되고,
{{ }} 라는 AngularJS의 표현식을 사용해서 text에 할당된 값을 표현할 수 있다.
물론 이 값은 {{ text }} 표현식을 사용하면, 어느곳에나 적용시킬 수 있다.
출처: https://jason-moon.tistory.com/95?category=610235 [Programmer]
'JavaScript FrontEnd > Angular' 카테고리의 다른 글
| [Angular] Data Binding (데이터 바인딩) (0) | 2021.04.29 |
|---|---|
| [Angular] 02.튜토리얼 (4~8) (0) | 2021.04.29 |
| [Angular] 01.튜토리얼(1~3) (0) | 2021.04.29 |
| [Angular] 튜토리얼(Introduction, The Application Shell, The Hero Editor) (0) | 2021.04.29 |
| [Angular] 시작하기 (0) | 2021.04.29 |
| AngularJS를 이용한 From Validation. (0) | 2021.04.13 |
| HighCharts 모듈 사용하기. (0) | 2021.04.13 |
| AngularJS와 jQuery의 간단한 비교.. (0) | 2021.04.13 |