Biểu thức AngularJS

❮ Trước Kế tiếp ❯

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

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

Biểu thức AngularJS 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>

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>

Bạn có thể viết biểu thức ở bất cứ đâu bạn thích, AngularJS sẽ đơn giản phân giải 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ụ

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>

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>

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>

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

Thí dụ

Đố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>

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

Thí dụ

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>

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>