AngularJS tut 2 : AngularJS Expressions ( Biểu thức)

0
(0)

AngularJS liên kết dữ liệu với HTML bằng cách sử dụng Biểu thức .


Biểu thức AngularJS

AngularJS biểu thức có thể được viết bên trong dấu ngoặc kép: .{{ expression }}

AngularJS biểu thức cũng có thể được viết bên trong một chỉ thị: .ng-bind="expression"

AngularJS sẽ giải quyết biểu thức và trả về kết quả chính xác nơi biểu thức được viết.

Các biểu thức AngularJS rất giống các biểu thức JavaScript: Chúng có thể chứa các ký tự, toán tử và biến.

Ví dụ {{5 + 5}} hoặc {{firstName + “” + lastName}}

Thí dụ

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>


Hãy tự mình thử »

Nếu bạn loại bỏ ng-appchỉ thị, HTML sẽ hiển thị biểu thức như hiện tại mà không giải quyết nó:

Thí dụ

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>


Hãy tự mình thử »

Bạn có thể viết biểu thức ở bất cứ đâu bạn thích, AngularJS sẽ đơn giản giải quyết biểu thức và trả về kết quả.

Ví dụ: Để AngularJS thay đổi giá trị của các thuộc tính CSS.

Thay đổi màu của hộp nhập liệu bên dưới, bằng cách thay đổi giá trị của nó:

Thí dụ

<div ng-app=”” ng-init=”myCol=’lightblue'”>

<input style=”background-color:{{myCol}}” ng-model=”myCol”>

</div>
Hãy tự mình thử »



Số AngularJS

Số AngularJS giống như số JavaScript:

Thí dụ

<div ng-app=”” ng-init=”quantity=1;cost=5″>

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Hãy tự mình thử »

Cùng một ví dụ sử dụng ng-bind:

Thí dụ

<div ng-app=”” ng-init=”quantity=1;cost=5″>

<p>Total in dollar: <span ng-bind=”quantity * cost”></span></p>

</div>Hãy tự mình thử »

Sử dụng ng-initkhông phải là rất phổ biến. Bạn sẽ học cách tốt hơn để khởi tạo dữ liệu trong chương về bộ điều khiển.


Chuỗi AngularJS

Chuỗi AngularJS giống như chuỗi JavaScript:

Thí dụ

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

<p>The name is {{ firstName + ” ” + lastName }}</p>

</div>Hãy tự mình thử »

Cùng một ví dụ sử dụng ng-bind:

Thí dụ

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

<p>The name is <span ng-bind=”firstName + ‘ ‘ + lastName”></span></p>

</div>Hãy tự mình thử »


Đối tượng AngularJS

Các đối tượng AngularJS giống như các đối tượng JavaScript:

Thí dụ

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

<p>The name is {{ person.lastName }}</p>

</div>Hãy tự mình thử »

Cùng một ví dụ sử dụng ng-bind:

Thí dụ

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

<p>The name is <span ng-bind=”person.lastName”></span></p>

</div>Hãy tự mình thử »


Mảng AngularJS

Mảng AngularJS giống như mảng JavaScript:

Thí dụ

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

<p>The third result is {{ points[2] }}</p>

</div>

Hãy tự mình thử »

Cùng một ví dụ sử dụng ng-bind:

Thí dụ

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

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Hãy tự mình thử »


Biểu thức AngularJS so với Biểu thức JavaScript

Giống như các biểu thức JavaScript, các biểu thức AngularJS có thể chứa các ký tự, toán tử và biến.

Không giống như các biểu thức JavaScript, các biểu thức AngularJS có thể được viết bên trong HTML.

Biểu thức AngularJS không hỗ trợ điều kiện, vòng lặp và ngoại lệ, trong khi các biểu thức JavaScript thì có.

Biểu thức AngularJS hỗ trợ bộ lọc, trong khi biểu thức JavaScript thì không.

Tìm hiểu về JavaScript trong Hướng dẫn JavaScript của chúng tôi .

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing