최신 웹 개발 튜토리얼
 

AngularJS식


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와 표현, 필터를 지원합니다.