Phần tử HTML DOM trong AngularJS

Tuấn Phong

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>