AngularJS có các chỉ thị để liên kết dữ liệu ứng dụng với các thuộc tính của các phần tử DOM HTML.
Chỉ thị ng-vô hiệu hóa
Các ng khuyết tật với phím tắt chỉ AngularJS dữ liệu ứng dụng vào thuộc tính tàn tật của các phần tử HTML.
Ví dụ về AngularJS
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Ứng dụng được giải thích:
Lệnh ng-disable liên kết mySwitch dữ liệu ứng dụng với thuộc tính bị vô hiệu hóa của nút HTML .
Các ng mô hình chỉ thị liên kết với các giá trị của phần tử checkbox HTML để giá trị của mySwitch .
Nếu giá trị của mySwitch được đánh giá là true , nút sẽ bị vô hiệu hóa:
<p>
<button disabled>Click Me!</button>
</p>
Nếu giá trị của mySwitch được đánh giá là false , nút sẽ không bị vô hiệu hóa:
<p>
<button>Click Me!</button>
</p>
Chỉ thị ng-show
Lệnh ng-show hiển thị hoặc ẩn một phần tử HTML.
Ví dụ về AngularJS
<div ng-app=””>
<p ng-show=”true”>I am visible.</p>
<p ng-show=”false”>I am not visible.</p>
</div>
Lệnh ng-show hiển thị (hoặc ẩn) một phần tử HTML dựa trên giá trị của ng-show.
Bạn có thể sử dụng bất kỳ biểu thức nào đánh giá là true hoặc false:
Ví dụ về AngularJS
<div ng-app=”” ng-init=”hour=13″>
<p ng-show=”hour > 12″>I am visible.</p>
</div>
Trong chương tiếp theo, có nhiều ví dụ hơn, sử dụng cách nhấp vào nút để ẩn các phần tử HTML.
Chỉ thị ng-hide
Các ng-hide da chỉ thị hoặc hiển thị một phần tử HTML.
Ví dụ về AngularJS
<div ng-app=””>
<p ng-hide=”true”>I am not visible.</p>
<p ng-hide=”false”>I am visible.</p>
</div>
