> 웹 프론트엔드 > JS 튜토리얼 > AngularJS_AngularJS의 표현식 사용법에 대한 자세한 설명

AngularJS_AngularJS의 표현식 사용법에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:54:41
원래의
923명이 탐색했습니다.

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

<p>Expense on Books : {{cost * quantity}} Rs</p>

로그인 후 복사

문자열 사용

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

로그인 후 복사

객체 사용

<p>Roll No: {{student.rollno}}</p>

로그인 후 복사

배열 사용

<p>Marks(Math): {{marks[3]}}</p>

로그인 후 복사

다음 예에서는 위의 표현을 모두 보여줍니다.
testAngularJS.html 파일 코드는 다음과 같습니다.

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
  <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
  <p>Expense on Books : {{cost * quantity}} Rs</p>
  <p>Roll No: {{student.rollno}}</p>
  <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

로그인 후 복사

출력

웹 브라우저에서 textAngularJS.html을 엽니다. 다음과 같이 결과를 확인하세요.

2015616115757530.png (587×339)

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿