AngularJS: Biểu thức trong Angular


Đăng ký nhận thông báo về những video mới nhất

AngularJS liên kết dữ liệu tới HTML sử dụng biểu thức.

Các biểu thức AngularJS

Các 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 các biểu thức, và trả lại kết quả chính xác nơi mà các biểu thức được viết.

Các biểu thức AngularJS giống như các biểu thức JavaScript: Chúng có thể chứa các chữ cái, toán tử và biến.

Ví dụ, {{ 5 + 5 }} hoặc {{ firstName + " " + lastName }}

Ví dụ

<!DOCTYPE html>
<html>
<script src="https://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>

Nếu bạn bỏ chỉ thị ng-app, HTML sẽ không giải quyết được biểu thức:

Ví dụ

<!DOCTYPE html>
<html>
<script src="https://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>

Bạn có thể viết các biểu thức bất cứ khi nào bạn thích, AngularJS chỉ đơn giản là giải quyết các biểu thức và trả lại kết quả.

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

Thay đổi màu sắc của hộp nhập liệu dưới đây, 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" value="{{myCol}}">

</div>

Số trong AngularJS

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

Ví dụ

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

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

</div>

Ví dụ tương tự sau đây sử dụng ng-bind:

Ví dụ

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

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

</div>

Việc sử dụng ng-init là không được phổ biến lắm. Bạn nên học một cách tốt hơn là cách khởi tạo dữ liệu ở phần bài học nói về controller.

Chuỗi trong AngularJS

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

Ví dụ

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

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

</div>

Ví dụ tương tự có sử dụng ng-bind:

Ví dụ

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

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Đối tượng trong AngularJS

Cũng tương tự như trong JavaScript:

Ví dụ

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

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

</div>

Ví dụ tương tự sử dụng ng-bind:

Ví dụ

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

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

</div>

Mảng trong AngularJS

Tương tự như mảng trong JavaScript:

Ví dụ

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

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

</div>

Ví dụ tương tự có sử dụng ng-bind:

Ví 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>

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

Tương tự như biểu thức trong JavaScript, biểu thức trong AngularJS có thể chứa hằng, toán tử và biến.

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

Biểu thức trong AngularJS không hỗ trợ phần điều kiện, vòng lặp và ngoại lệ.

Biểu thức trong AngularJS hỗ trợ việc lọc, trong JavaScript thì không.

Đăng ký nhận thông báo về những video mới nhất
« Prev: AngularJS: Giới thiệu
» Next: AngularJS: Module trong Angular
Copied !!!