Biểu thức AngularJS
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 }} .
Các biểu thức AngularJS cũng có thể được viết bên trong một lệnh: 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.
Biểu thức AngularJS rất giống với biểu thức JavaScript: Chúng có thể chứa hằng số, 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.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 xóa lệnh ng-app , HTML sẽ hiển thị biểu thức như cũ mà không giải quyết nó:
Ví 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ẽ chỉ giải quyết biểu thức và trả về kết quả.
Ví dụ: Hãy để AngularJS thay đổi giá trị của thuộc tính CSS.
Thay đổi màu của hộp nhập bên dưới bằng cách thay đổi giá trị của nó:
Ví 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:
Ví dụ
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Hãy tự mình thử » Ví dụ tương tự khi 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>
Hãy tự mình thử » Sử dụng ng-init không phổ biến lắm. 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:
Ví dụ
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Hãy tự mình thử » Ví dụ tương tự khi 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>
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:
Ví 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ử » Ví dụ tương tự khi 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>
Hãy tự mình thử »Mảng AngularJS
Mảng AngularJS giống như mảng JavaScript:
Ví 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ử » Ví dụ tương tự khi 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>
Hãy tự mình thử »Biểu thức AngularJS so với Biểu thức JavaScript
Giống như biểu thức JavaScript, biểu thức AngularJS có thể chứa hằng số, 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.
Các biểu thức AngularJS không hỗ trợ các đ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ợ các 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.
