Bao thức AngularJS

Trang trước Giới thiệu AngularJS
Trang tiếp theo Mô-đun AngularJS

AngularJS thông quaBiểu thứcKết nối dữ liệu với HTML.

Bao thức AngularJS

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

Biểu thức AngularJS cũng có thể được viết trong hướng dẫn:ng-bind="expression".

AngularJS sẽ phân tích biểu thức và trả về kết quả ở vị trí viết biểu thức.

Bao thức AngularJSgiống Biểu thức JavaScript：Họ có thể chứa giá trị văn bản, toán tử và biến.

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

thực例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Biểu thức đầu tiên của tôi: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Thử ngay

Nếu bạn xóa bỏ ng-app Hướng dẫn, HTML sẽ hiển thị biểu thức nguyên văn, không phân tích.

thực例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Biểu thức đầu tiên của tôi: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Thử ngay

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

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

Thay đổi giá trị của nó để thay đổi màu sắc của ô nhập dưới đây:

xanh nhạt

thực例

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Thử ngay

Số AngularJS

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

thực例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Tổng số tiền (USD): {{ quantity * cost }}</p>
</div>

Thử ngay

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

thực例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Tổng số tiền (USD): <span ng-bind="quantity * cost"></span></p>
</div>

Thử ngay

Sử dụng ng-init không phổ biến. Bạn sẽ học cách khởi tạo dữ liệu tốt hơn trong phần về điều khiển viên.

Chuỗi AngularJS

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

thực例

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Tên là {{ firstName + " " + lastName }}</p>
</div>

Thử ngay

ví dụ sử dụng ng-bind như sau:

thực例

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Tên là <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Thử ngay

Đối tượng AngularJS

Đối tượng AngularJS giống như đối tượng JavaScript:

thực例

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Tên là {{ person.lastName }}</p>
</div>

Thử ngay

ví dụ sử dụng ng-bind như sau:

thực例

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Tên là <span ng-bind="person.lastName"></span></p>
</div>

Thử ngay

Mảng AngularJS

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

thực例

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Kết quả thứ ba là {{ points[2] }}</p>
</div>

Thử ngay

ví dụ sử dụng ng-bind như sau:

thực例

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Kết quả thứ ba là <span ng-bind="points[2]"></span></p>
</div>

Thử ngay