AngularJS 표현식

❮ 이전의 다음 ❯

AngularJS는 Expressions 를 사용하여 데이터를 HTML에 바인딩합니다 .

AngularJS 표현식

AngularJS 표현식은 이중 중괄호 안에 작성할 수 있습니다 .{{ expression }}

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

AngularJS는 표현식을 해결하고 표현식이 작성된 위치에 정확히 결과를 반환합니다.

AngularJS 표현식 은 JavaScript 표현식 과 매우 유사 합니다. 리터럴, 연산자 및 변수를 포함할 수 있습니다.

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

예시

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

<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

지시문 을 제거하면 ng-appHTML은 표현식을 해결하지 않고 있는 그대로 표시합니다.

예시

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

<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

원하는 곳에 표현식을 작성할 수 있습니다. AngularJS는 단순히 표현식을 해결하고 결과를 반환합니다.

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

값을 변경하여 아래 입력 상자의 색상을 변경합니다.

예시

AngularJS 숫자

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

예시

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

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

</div>

다음 을 사용하는 동일한 예 ng-bind:

예시

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

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

사용 ng-init은 그리 흔하지 않습니다. 컨트롤러에 대한 장에서 데이터를 초기화하는 더 나은 방법을 배우게 될 것입니다.

AngularJS 문자열

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

예시

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

다음 을 사용하는 동일한 예 ng-bind:

예시

AngularJS 객체

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

예시

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

다음 을 사용하는 동일한 예 ng-bind:

예시

AngularJS 배열

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

예시

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

다음 을 사용하는 동일한 예 ng-bind:

예시

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>