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> 

Hãy tự mình thử »

Ứ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>

Hãy tự mình thử »

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>

Hãy tự mình thử »

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>

Hãy tự mình thử »