[AngularJS] Phần 15: AngularJS HTML DOM

128 lượt xem

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ình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz