테스트 사이트 - 개발 중인 베타 버전입니다

AngularJS Directives(지시문) - 데이터 바인딩

· 8년 전 · 1059
AngularJS Directives(지시문) - 데이터 바인딩

데이터 바인딩

{{ firstName }}식은, 위의 예에서는 식 바인딩 AngularJS와 데이터이다.

AngularJS의 데이터 바인딩은 AngularJS 표현식을 AngularJS 데이터와 바인딩합니다.

{{ firstName }}에 묶여있다 ng-model="firstName".

다음 예제에서는 두 개의 텍스트 필드가 두 개의 ng-model 지시문과 함께 바인딩됩니다.

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>


소스
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1199
1197
1181
1165
785
455
426
311
287
247
237
236
220
215
205
179
167
133
119
108
98
86
82
64
50
46
34
1