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>

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à:

Kết quả AngularJS

Theo Tutorialspoint

Bài trước: Thành phần Controller trong AngularJS

Bài tiếp: Các Module trong AngularJS

Thứ Tư, 25/07/2018 17:37

1 ★ 1 👨 440

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!