AngularJS와는 표현식을 사용하여 HTML로 데이터를 바인딩합니다.
AngularJS와 식
식을 두 번 괄호 안에 기록 할 수 AngularJS와 : {{ expression }}
.
: 표현도 지시어 내에서 쓸 수 있습니다 AngularJS와 ng-bind=" expression "
.
AngularJS와는 식을 해결하고, 표현이 기록 정확하게 결과를 반환합니다.
그들은 리터럴, 연산자 및 변수를 포함 할 수 있습니다 : 표현이 많은 자바 스크립트 표현식처럼 AngularJS와.
예 {{5 + 5}} 또는 {{firstName을 + ""+이 lastName}}
예
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
»그것을 자신을 시도 당신이 제거하면 ng-app
지시문을 그것을 해결하지 않고,있는 그대로, HTML은 표현을 표시합니다 :
예
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
»그것을 자신을 시도 당신이 원하는 어디든지 당신은 표현을 쓸 수 AngularJS와 단순히 식을 해결하고 결과를 반환합니다.
예 :하자 AngularJS와는 CSS 속성의 값을 변경합니다.
이 값의 변화에 의해, 다음 입력 상자의 색을 변경 :
예
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
»그것을 자신을 시도 AngularJS와 숫자
AngularJS와 숫자는 자바 스크립트 번호 같다 :
예
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
»그것을 자신을 시도 사용하여 같은 예 ng-bind
:
예
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
»그것을 자신을 시도 사용 ng-init 매우 일반적인 아닙니다. 당신은 컨트롤러에 대한 장에서 데이터를 초기화하는 더 좋은 방법을 배울 것입니다. |
AngularJS와 문자열
AngularJS와 문자열은 자바 스크립트 문자열과 같다 :
예
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
»그것을 자신을 시도 사용하여 같은 예 ng-bind
:
예
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
»그것을 자신을 시도 AngularJS와 객체
AngularJS와 객체는 자바 스크립트 객체 같다 :
예
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
»그것을 자신을 시도 사용하여 같은 예 ng-bind
:
예
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
»그것을 자신을 시도 AngularJS와 배열
AngularJS와 배열은 자바 스크립트의 배열과 같다 :
예
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
»그것을 자신을 시도 사용하여 같은 예 ng-bind
:
예
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
»그것을 자신을 시도 자바 스크립트 식 대 AngularJS와 식
자바 스크립트의 표현처럼, AngularJS와 표현식 리터럴, 연산자 및 변수를 포함 할 수 있습니다.
자바 스크립트 표현 달리 AngularJS와 식은 HTML 내부에 기록 될 수있다.
자바 스크립트를 표현 할 동안 표현, 조건문, 루프, 예외를 지원하지 않습니다 AngularJS와.
자바 스크립트 표현하지 않는 동안 AngularJS와 표현, 필터를 지원합니다.