[AngularJS] Phần 15: AngularJS HTML DOM

Cập nhật lần cuối: 23/09/2023 lúc 16:00:21

AngularJS có các chỉ thị để trói dữ liệu ứng dụng với các thuộc tính của các phần tử HTML DOM.

Chỉ thị ng-disabled
Chỉ thị này trói dữ liệu ứng dụng AngularJS với thuộc tính disabled của các phần tử HTML.

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

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Button 1 - dammio.com</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Enable/Disable
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>

Trong ví dụ trên, chỉ thị ng-disabled trói dữ liệu ứng dụng mySwitch với thuộc tính nút disabled. Do đó, khi chọn hay bỏ chọn nút checkbox thì trạng thái của nút nhấn thay đổi enable hoặc disable với giá trị của mySwitch là true hoặc false.

Chỉ thị ng-show
Chỉ thị ng-show hiển thị hoặc ẩn 1 phần tử HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
<p ng-show="true">Văn bản được hiển thị --- dammio.com</p>
<p ng-show="false">Văn bản bị ẩn đi</p>
</div> 

</body>
</html>

Trong ví dụ trên, chỉ thị ng-show cho phép hiện hoặc ẩn 1 phần tử HTML dựa trên giá trị true hoặc false. Để xác định giá trị của ng-show là true hay false, bạn còn có thể dùng 1 diễn giải điều kiện như ví dụ sau.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="x=5">
<p ng-show="x > 4">Văn bản được hiển thị do mệnh đề x > 4 là true --- dammio.com</p>
</div> 

</body>
</html>

Chỉ thị ng-hide
Chỉ thị này dùng để ẩn hay hiện 1 phần tử HTML, nhưng cách dùng ngược lại với ng-show. Nếu ng-hide là true có nghĩa là ẩn 1 phần tử HTML, false có nghĩa là hiện phần tử đó.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
<p ng-hide="true">Đoạn văn bản bị ẩn đi</p>
<p ng-hide="false">Đoạn văn bản được hiện --- dammio.com</p>
</div> 

</body>
</html>

Kết luận: Như vậy bài này, các bạn đã học được 1 số chỉ thị đơn giản dùng trong HTML DOM. Mời các bạn tiếp tục bài tiếp theo về AngularJS.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [AngularJS] Phần 6: Ràng buộc dữ liệu trong AngularJS

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

APA:
Dammio. (2017). [AngularJS] Phần 15: AngularJS HTML DOM. https://www.dammio.com/2017/05/11/angularjs-phan-15-angularjs-html-dom.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 15: AngularJS HTML DOM}, year = {2017}, url = {https://www.dammio.com/2017/05/11/angularjs-phan-15-angularjs-html-dom}, urldate = {2024-12-05} }

Kết nối