AngularJS 표현 기초 학습 노트_AngularJS-JS 튜토리얼-php.cn

AngularJS 표현 기초 학습 노트_AngularJS

WBOY

풀어 주다： 2016-05-16 15:59:56

원래의

1089명이 탐색했습니다.

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

AngularJS 표현식

AngularJS 표현식은 이중 중괄호({{ 표현식 문 }})로 작성됩니다.

AngularJS 표현식은 ng-bind 지시문과 동일한 방식으로 데이터를 HTML에 바인딩합니다.

AngularJS는 표현식을 계산된 결과로 정확하게 "출력"합니다.

AngularJS 표현식은 JavaScript 표현식과 많은 유사점을 가지고 있습니다. 둘 다 리터럴, 연산자 및 변수를 포함합니다. 예를 들어 {{ 5 5 }} 및 {{ firstName " " lastName }}

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

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

로그인 후 복사

ng-app 지시문을 제거하면 표현식이 평가되지 않고 페이지에 직접 표시됩니다.

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

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

</body>
</html>

로그인 후 복사

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 문자열

AngularJS 문자열은 JavaScript 문자열과 동일합니다.

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

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

</div>

로그인 후 복사

마찬가지로 ng-bind 지시문을 사용하여 동일한 효과를 얻을 수 있습니다.

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

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

로그인 후 복사

AngularJS 객체

AngularJS 개체는 JavaScript 개체와 동일합니다.

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

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

</div>

로그인 후 복사

마찬가지로 ng-bind 지시문을 사용하여 동일한 효과를 얻을 수 있습니다.

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

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

로그인 후 복사

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>

로그인 후 복사

AngularJS 표현식과 JavaScript 표현식 비교

JavaScript 표현식과 마찬가지로 AngularJS 표현식에도 리터럴, 연산자 및 변수가 포함되어 있습니다. 자바스크립트 표현식과 달리

AngularJS 표현식은 HTML로 작성할 수 있습니다.
AngularJS 표현식은 조건문과 루프문을 지원하지 않으며 예외문도 없습니다.
AngularJS 표현식은 필터를 지원합니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.