AngularJS 표현식

AngularJS는 표현식을 사용하여 데이터를 HTML에 바인딩합니다.

AngularJS 표현식

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

AngularJS 표현식은 데이터를 HTML에 바인딩하며 이는 ng-bind 지시어와 유사합니다.

AngularJS는 표현식이 작성된 데이터를 "출력"합니다.

AngularJS 표현식은 JavaScript와 많이 비슷합니다. 표현식 : 리터럴, 연산자 및 변수를 포함할 수 있습니다.

인스턴스 {{ 5 + 5 }} 또는 {{ firstName + " " + lastName }}

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

AngularJS 숫자

AngularJS 숫자는 JavaScript 숫자와 같습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

ng-bind를 사용하는 동일한 인스턴스 :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

	ng-init을 사용하는 것은 그리 일반적이지 않습니다. 컨트롤러 장에서 데이터를 초기화하는 더 나은 방법을 배우게 됩니다.

AngularJS 문자열

AngularJS 문자열은 JavaScript 문자열과 같습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名: {{ firstName + " " + lastName }}</p>

</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

ng-를 사용하는 동일한 인스턴스 바인딩:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

AngularJS 개체

AngularJS 개체는 JavaScript 개체와 같습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓为 {{ person.lastName }}</p>

</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

ng-bind를 사용하는 동일한 인스턴스:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

</body>
</html>

인스턴스 실행»

클릭 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 누르세요

AngularJS 배열

AngularJS 배열은 JavaScript 배열과 같습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스

ng-bind를 사용하는 동일한 인스턴스:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요