Phần tử HTML DOM trong AngularJS
Những directive trong AngularJS dưới đây có thể được sử dụng để bind dữ liệu trong ứng dụng tới các thuộc tính trong phần tử HTML DOM. ng-disabled: Vô hiệu hóa một điều khiển (control) đã cung cấp ng-show: Hiển thị một điều khiển đã cung cấp ...
Những directive trong AngularJS dưới đây có thể được sử dụng để bind dữ liệu trong ứng dụng tới các thuộc tính trong phần tử HTML DOM.
- ng-disabled: Vô hiệu hóa một điều khiển (control) đã cung cấp
- ng-show: Hiển thị một điều khiển đã cung cấp
- ng-hide: Ẩn một điều khiển đã cung cấp
- ng-click: Biểu diễn một sự kiện click chuột trong AngularJS
Directive ng-disabled trong AngularJS
Thêm thuộc tính ng-disable vào một nút HTML và gắn dữ liệu này với model. Gắn kết model tới một checkbox quan sát sự thay đổi.
<input type = "checkbox" ng-model = "enableDisableButton">Vô hiệu hóa nút <button ng-disabled="vohieuhoakichhoatnut">Nhan vao day!</button>
Directive ng-show trong AngularJS
Thêm thuộc tính ng-show vào nút HTML và gắn nó cho model. Gắn kết model đến một checkbox quan sát sự thay đổi.
<input type = "checkbox" ng-model = "showHide1">Hiện nút <button ng-show = "showHide1">Nhấp vào đây!</button>
Directive ng-hide trong AngularJS
Thêm thuộc tính ng-hide vào nút HTML và gắn nó cho model. Gắn kết model đến một checkbox quan sát sự thay đổi.
<input type = "checkbox" ng-model = "showHide2">Ẩn nút <button ng-show = "showHide1">Nhấp vào đây!</button>
Directive ng-click trong AngularJS
Thêm thuộc tính ng-click vào Nút HTML và gắn nó cho model. Gắn kết model đến hmtl quan sát sự thay đổi.
<p>Tổng số lần nhấp: {{ clickCounter }}</p> <button ng-click = "clickCounter = clickCounter + 1">Nhấp vào đây!</button>
Ví dụ
Dưới đây là toàn bộ ví dụ cho phần mô tả đã đề cập phía trên.
phantuHTMLDOM.html
<html> <head> <title>HTML DOM trong AngularJS</title> </head> <body> <h2>Ví dụ AngularJS QTM</h2> <div ng-app = ""> <table border = "0"> <tr> <td><input type = "checkbox" ng-model = "enableDisableButton">Vô hiệu hóa nút</td> <td><button ng-disabled = "enableDisableButton">Nhấp vào đây!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide1">Hiện nút</td> <td><button ng-show = "showHide1">Nhấp vào đây!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide2">Ẩn nút</td> <td><button ng-hide = "showHide2">Nhấp vào đây!</button></td> </tr> <tr> <td><p>Tổng số lần nhấp: {{ clickCounter }}</p></td> <td><button ng-click = "clickCounter = clickCounter + 1">Nhấp vào đây!</button></td> </tr> </table> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </body> </html>
Kết quả:
Mở trang phantuHTMLDOM.html trên trình duyệt web và xem kết quả. Nếu bạn click lần lượt vào các nút trên, kết quả sẽ là:
Theo Tutorialspoint
Bài trước: Thành phần Controller trong AngularJS
Bài tiếp: Các Module trong AngularJS
