DOM HTML của AngularJS
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ử HTML DOM.
Chỉ thị ng-disable
Lệnh ng-disabled 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.
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 giải thích:
Lệnh ng-disabled liên kết dữ liệu ứng dụng mySwitch với thuộc tính bị vô hiệu hóa của nút HTML.
Lệnh ng-model liên kết giá trị của phần tử hộp kiểm HTML với giá trị của mySwitch .
Nếu giá trị của mySwitch là true thì nút này sẽ bị tắt:
<p>
<button disabled>Click Me!</button>
</p>
Nếu giá trị của mySwitch ước tính là false thì nút này sẽ không bị tắt:
<p>
<button>Click Me!</button>
</p>
Chỉ thị ng-show
Lệnh ng-show hiển thị hoặc ẩn 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à đúng hoặc sai:
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, sẽ có nhiều ví dụ hơn về cách sử dụng một cú nhấp chuột để ẩn các phần tử HTML.
Chỉ thị ng-hide
Lệnh ng-hide ẩn hoặc hiển thị 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ử »