AngularJS 입문 튜토리얼 - AngularJS 표현식_AngularJS

표현식은 HTML에 대한 애플리케이션 데이터 바인딩에 사용됩니다. 표현식은 {{expression}}과 같이 이중 괄호 안에 작성됩니다. 표현식의 동작은 ng-bind 지시문과 동일합니다. AngularJS 애플리케이션 표현식은 순수한 자바스크립트 표현식이며 거기에서 사용되는 데이터를 출력합니다.

AngularJS 표현식 형식: {{expression }}

AngularJS 표현식은 문자열, 숫자, 연산자 및 변수가 될 수 있습니다

숫자 연산 {{1 + 5}}

문자열 연결 {{ 'abc' + 'bcd' }}

변수 연산 {{ firstName + " " + lastName }}, {{ 수량 * 비용 }}

객체 {{ person.lastName }}

배열{{ 포인트[2] }}

AngularJS 예

1.Angularjs 숫자

<div ng-app="" ng-init="quantity=2;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div> 

위 예시의 출력:

총 가격: 10

코드 주석:

ng-init="quantity=2;cost=5" //자바스크립트의 var amount=2,cost=5;
와 동일 ng-bind를 사용하여 동일한 기능을 구현할 수 있습니다

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
//这里的ng-bind相当于指定了span的innerHTML
</div> 

2.Angularjs 문자열

<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div> 

출력

이름: 존 스노우

3.AngularJS 객체

<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}">
<p>姓为 {{ person.lastName }}</p>
</div> 

출력

성은 스노우

4.AngularJS 배열

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

출력

세 번째 값은 19

위는 편집자가 소개한 AngularJS 입문 튜토리얼에서 AngularJS 표현식에 대한 소개입니다. 모든 분들께 도움이 되길 바랍니다!