[AngularJS] Phần 2: Các diễn giải AngularJS

Cập nhật lần cuối: 23/09/2023 lúc 09:49:54

Thể loại: AngularJS, Thiết kế Web

<< Bài trước

Trang mục lục

Bài tiếp theo >>

AngularJS trói dữ liệu vào HTML bằng cách sử dụng các diễn giải (expressions).

Diễn giải AngularJS
Diễn giải AngularJS có thể được viết bên trong cặp dấu ngoặc nhọn đóng/mở:

{{ diễn giải }}

Diễn giải AngularJS cũng có thể viết bên trong 1 chỉ thị: ng-bind=”expression”.

AngularJS sẽ phân giải diễn giải, và trả về kết quả chính như diễn giải được viết. Các diễn giải AngularJS gần giống như các diễn giải JavaScript: Chúng có thể chứa ký tự, toán tử và biến.

Ví dụ 1: {{ 5 + 5 }} hoặc {{ firstName + ” ” + lastName }}

Ví dụ 2: Diễn giải tính tổng 2 số

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
	<p>Diễn giải AngularJS (www.dammio.com)</p>
  <p>Kết quả của 12 + 7 là: {{ 12 + 7 }}</p>
</div>

</body>
</html>

Bạn có thể đặt vị trí các diễn giải ở bất kỳ nơi nào trong trang web, AngularJS sẽ phân giải diễn giải và trả về kết quả.

Ví dụ 3: Thay đổi giá trị mày của 1 hộp input bằng AngularJS

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<p>Dùng AngularJS để thay màu nền của text input - dammio.com
<div ng-app="" ng-init="mausac='pink'">
<input style="background-color:{{mausac}}" ng-model="mausac" value="{{mausac}}">
</div>
 
</body>
</html>

Số trong AngularJS
Các số AngularJS tương tự như các số trong JavaScript.

Ví dụ 1: Ví dụ sau chúng ta khai báo 2 biến đầu vào (a = 2.5 và b = 5) và xuất ra kết quả tích của 2 biến đó với diễn giải {{ a * b }}.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Tính tích 2 số a và b - dammio.com</p>
<div ng-app="" ng-init="a=2.5;b=5">
<p>Tích của a = 2.5 và b = 5 là: {{ a * b }}</p>
</div>
</body>
</html>

Ngoài ra, chúng ta cũng có thể sử dụng ng-bind để xuất kết quả, tuy nhiên cách này cũng không phổ biến lắm.

<p>Tổng của a và b: <span ng-bind="a*b"></span></p>

Chuỗi trong AngularJS
Các chuỗi trong AngularJS tương tự cũng y chang như chuỗi trong JavaScript.

Liên quan: [AngularJS] Phần 14: AngularJS và SQL

Ví dụ: Xuất kết quả tên đầy đủ biết họ và tên theo 2 kiểu: diễn giải và ng-bind.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<p>Chuỗi trong AngularJS - dammio.com</p>
<div ng-app="" ng-init="firstName='Dammio';lastName='Alonso'">
<p>Tên đầy đủ là {{ firstName + " " + lastName }}</p>
<p>Tên đầy đủ là <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

</body>
</html>

Đối tượng trong AngularJS
Tương tự với các phần trên, đối tượng trong AngularJS cũng tương tự như trong JavaScript.

Ví dụ: Sử dụng đối tượng trong AngularJS

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<p>Đối tượng trong AngularJS - dammio.com</p>
<div ng-app="" ng-init="person={firstName:'Dammio',lastName:'Alonso'}">
	<p>Tên tôi là {{ person.lastName }}</p>
	<p>Tên tôi là <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>

Mảng trong AngularJS
Mảng trong AngularJS cũng tương tự như trong JavaScript.

Ví dụ: Sử dụng mảng trong AngularJS

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<p>Mảng trong AngularJS - dammio.com</p>
<div ng-app="" ng-init="points=[8,1,91,67,20,88]">
	<p>Giá trị phần tử số 2 là {{ points[1] }}</p>
	<p>Giá trị phần tử số 2 là <span ng-bind="points[1]"></span></p>
</div>

</body>
</html>

Diễn giải Angular vs diễn giải JavaScript
Điểm giống là các diễn giải AngularJS (AngularJS expression) chứa ký tự, toán tử và biến.

Điểm khác là các diễn giải AngularJS có thể viết bên trong HTML. Diễn giải AngularJS không hỗ trợ điều kiện, vòng lặp và các ngoại lệ (exception), ngược lại các diễn giải JavaScript hỗ trợ những điều này.

Diễn giải AngularJS hỗ trợ lọc (filter), trong khi đó diễn giải JavaScript thì không.

Kết luận: như vậy bài này giúp chúng ta hiểu được các diễn giải trong AngularJS cũng như cách xuất ra kết quả của các diễn giải đó với các kiểu dữ liệu khác nhau, đồng thời tìm hiểu sự khác biệt giữa diễn giải JavaScript và diễn giải AngularJS.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 2: Các diễn giải AngularJS. https://www.dammio.com/2017/01/20/angularjs-phan-2-cac-dien-giai-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 2: Các diễn giải AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/01/20/angularjs-phan-2-cac-dien-giai-angularjs}, urldate = {2024-12-07} }

Kết nối