[AngularJS toàn tập] Phần 7 : Phần tử HTML DOM
Là một lập trình viên chắc hẳn bạn không còn xa lạ gì với HTML DOM . Trong angular js thì những directive 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 control đã cung cấp ng-show : Hiển thị ...
Là một lập trình viên chắc hẳn bạn không còn xa lạ gì với HTML DOM .
Trong angular js thì những directive 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 control đã cung cấp
- ng-show : Hiển thị một control đã cung cấp
- ng-hide : Ẩn một control đã cung cấp
- ng-click :Biểu diễn một sự kiện click chuột trong AngularJS
Ng-disabled directive trong angular js
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.
<tr> <td><input type="checkbox" ng-model="disable_button">Disable button</td> <td><button ng-disabled="disable_button">Button</button></td> </tr>
Ng-show directive trong angular js
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, click vào check box để xem sự thay đổi.
<tr> <td><input type="checkbox" ng-model="show_button">Show button</td> <td><button ng-show="show_button">Button</button></td> </tr>
Ng-hide trong angular js
Thêm thuộc tính ng-hide vào nút HTML và gắn nó cho model.
Click vào check box bạn sẽ thấy button bị ẩn đi.
<tr> <td><input type="checkbox" ng-model="hide_button">Hide button</td> <td><button ng-hide="hide_button">Button</button></td> </tr>
Ng-click trong angular js
Thêm thuộc tính ng-click vào Nút HTML và gắn nó cho model.
Mỗi lần bạn click thì biến đếm count sẽ tăng lên 1.
<tr> <td><p>Click count: {{ count_click }}</p></td> <td><button ng-click="count_click = count_click + 1">Click me!</button></td> </tr>
Bạn có thể xem ví dụ tổng hợp về các directive bên dưới ở đây
<html> <head> <title>Phan tu HTML DOM trong AngularJS</title> </head> <body> <h2>Phần tử HTML DOM</h2> <div ng-app=""> <table border="0"> <tr> <td><input type="checkbox" ng-model="disable_button">Disable button</td> <td><button ng-disabled="disable_button">Button</button></td> </tr> <tr> <td><input type="checkbox" ng-model="show_button">Show button</td> <td><button ng-show="show_button">Button</button></td> </tr> <tr> <td><input type="checkbox" ng-model="hide_button">Hide button</td> <td><button ng-hide="hide_button">Button</button></td> </tr> <tr> <td><p>Click count: {{ count_click }}</p></td> <td><button ng-click="count_click = count_click + 1">Click me!</button></td> </tr> </table> </div> </body> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </html>
đơn giản và dễ hiểu đúng không các bạn, hãy bắt tay vào code một đoạn đi thôi.
Bạn có thể xem demo và chạy thử code tại đây >>>> https://jsfiddle.net/SonCheDinh/u7dusr3f/
