Rate this post

Trong AngularJS, một số chỉ thị có thể được sử dụng để liên kết dữ liệu ứng dụng với các thuộc tính của phần tử DOM HTML.

Các bài viết liên quan:

Các chỉ thị này là:

Chỉ thịSự miêu tả
ng-disabledNó vô hiệu hóa một điều khiển nhất định.
ng-showNó cho thấy một sự kiểm soát nhất định.
ng-hideNó ẩn một kiểm soát nhất định.
ng-clickNó đại diện cho một sự kiện nhấp chuột AangularJS.

Chỉ thị ng-disable: Chỉ thị ng-disable liên kết dữ liệu ứng dụng AngularJS với thuộc tính bị vô hiệu hóa của các phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng-model = "enableDisableButton">
Disable Button  button 
ng-disabled = "enableDisableButton">Click Me!</button>  

Chỉ thị ng-show: Chỉ thị ng-show hiển thị hoặc ẩn một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng
model = "showHide1">
Show Button  button ng
show = "showHide1">Click Me!</button>   

Chỉ thị ng-hide: Chỉ thị ng-hide ẩn hoặc hiển thị một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng-model = "showHide2">
Hide Button  
<button ng-hide = "showHide2">Click Me!</button>   

Chỉ thị ng-click: Chỉ thị ng-click đếm tổng số lần nhấp vào một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<p>Total click: {{ clickCounter }}</p>  
lt;button ng-click = "clickCounter = clickCounter + 1">
Click Me!</button>   

Hãy lấy một ví dụ để triển khai tất cả các lệnh trên và kiểm tra các biến thể:

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<head>  
      <title>AngularJS HTML DOM</title>  
</head>  
<body>  
      <h2>Mẫu ứng dụng Application</h2>  
      <div ng-app = "">  
           <table border = "0">  
            <tr>  
               <td><input type = "checkbox" ng-model = "enableDisableButton">Nút tắt</td>  
               <td><button ng-disabled = "enableDisableButton">
Nhấp vào tôi!</button></td>  
            </tr>  
            <tr>  
               <td><input type = "checkbox" ng-model = "showHide1">
Hiển thị Tôi!</td>  
               <td><button ng-show = "showHide1">
Nhấp vào Tôi!</button></td>  
            </tr>  
             <tr>  
               <td><input type = "checkbox" ng-model = "showHide2">Hiển thị nút</td>  
               <td><button ng-hide = "showHide2">
Nhấp vào Tôi!</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 Tôi!</button></td>  
            </tr>  
         </table>  
         </div>  
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
</body>  
</html>   

Kết quả

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Call now