AngularJS 표현식

이전 페이지 AngularJS 소개
다음 페이지 AngularJS 모듈

AngularJS는표현식데이터를 HTML에 바인딩합니다.

AngularJS 표현식

AngularJS 표현식은 두 대括호 내에 작성할 수 있습니다:{{ expression }}。

AngularJS 표현식은 지시 내에도 작성할 수 있습니다:ng-bind="expression"。

AngularJS는 표현식을 해석하고, 표현식을 작성한 위치에서 결과를 반환합니다.

AngularJS 표현식매우 JavaScript 표현식：그들은 문자面량, 연산자, 변수를 포함할 수 있습니다.

예제 {{ 5 + 5 }} 또는 {{ firstName + " " + lastName }}

예제

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>제 하나의 표현식: {{ 5 + 5 }}</p>
</div>
</body>
</html>

직접 테스트해 보세요

제거된 경우 ng-app 지시, HTML은 표현식을 그대로 표시하고 해석하지 않습니다:

예제

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>제 하나의 표현식: {{ 5 + 5 }}</p>
</div>
</body>
</html>

직접 테스트해 보세요

귀하가 좋아하는 위치에서 표현식을 작성할 수 있습니다. AngularJS는 간단하게 표현식을 해석하여 결과를 반환합니다.

예제: AngularJS가 CSS 속성 값을 변경하도록 합니다.

아래 입력 상자의 색상을 변경하여 값을 변경하세요:

연한 파란색

예제

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

직접 테스트해 보세요

AngularJS 숫자

AngularJS 숫자는 JavaScript 숫자와 같습니다:

예제

<div ng-app="" ng-init="quantity=1;cost=5">
<p>총 금액(달러): {{ quantity * cost }}</p>
</div>

직접 테스트해 보세요

사용 ng-bind 동일한 예제:

예제

<div ng-app="" ng-init="quantity=1;cost=5">
<p>총 금액(달러): <span ng-bind="quantity * cost"></span></p>
</div>

직접 테스트해 보세요

ng-init를 사용하는 것은 흔하지 않습니다. 제어자의 장단점에 대해 더 나은 데이터 초기화 방법을 학습할 수 있습니다.

AngularJS 문자열

AngularJS 문자열은 JavaScript 문자열과 같습니다:

예제

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>이름은 {{ firstName + " " + lastName }}</p>
</div>

직접 테스트해 보세요

ng-bind를 사용하는 동일한 예제:

예제

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>이름은 <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

직접 테스트해 보세요

AngularJS 객체

AngularJS 객체는 JavaScript 객체와 같습니다:

예제

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>이름은 {{ person.lastName }}</p>
</div>

직접 테스트해 보세요

ng-bind를 사용하는 동일한 예제:

예제

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>이름은 <span ng-bind="person.lastName"></span></p>
</div>

직접 테스트해 보세요

AngularJS 배열

AngularJS 배열은 JavaScript 배열과 같습니다:

예제

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>세 번째 결과는 {{ points[2] }}</p>
</div>

직접 테스트해 보세요

ng-bind를 사용하는 동일한 예제:

예제

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>세 번째 결과는 <span ng-bind="points[2]"></span></p>
</div>

직접 테스트해 보세요