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>
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 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>
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>
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>
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 .