>  기사  >  웹 프론트엔드  >  AngularJS 입문 튜토리얼 - AngularJS 표현식_AngularJS

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

WBOY
WBOY원래의
2016-05-16 15:05:051509검색

표현식은 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 표현식에 대한 소개입니다. 모든 분들께 도움이 되길 바랍니다!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.