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