[AngularJS] Phần 15: AngularJS HTML DOM

307 lượt xem 
 Thể loại: AngularJS, Thiết kế Web

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

1
Để lại bình luận

avatar
1000
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of