AngularJS: DOM HTML trong AngularJS
AngularJS có các chỉ thị để liên kết dữ liệu ứng dụng tới các thuộc tính của các phần tử HTML DOM.
Chỉ thị ng-disabled
Chỉ thị ng-disabled dùng để liên kết dữ liệu ứng dụng AngularJS tới thuộc tính disabled của các phần tử HTML.
Ví dụ
<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>
Giải thích:
Chỉ thị ng-disabled liên kết dữ liệu ứng dụng mySwitch tới thuộc tính disabled của nút lệnh (button).
Chỉ thị ng-model liên kết giá trị của phần tử checkbox tới giá trị của mySwitch.
Nếu giá trị của mySwitch có giá trị là true, thì button sẽ bị disabled:
<p>
<button disabled>Click Me!</button>
</p>
Nếu giá trị của mySwitch là false, thì button sẽ không bị disabled:
<p>
<button>Click Me!</button>
</p>
Chỉ thị ng-show
Chỉ thị ng-show dùng để hiện hoặc ẩn một phần tử HTML.
Ví dụ
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
Chỉ thị ng-show sẽ hiện hoặc ẩn phần tử HTML dựa trên value của ng-show.
Ta có thể sử dụng bất kỳ biểu thức nào để xác định giá trị true hay false:
Ví dụ
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
Chỉ thị ng-hide
Chỉ thị ng-hide dùng để ẩn hoặc hiện phần tử HTML.
Ví dụ
<div ng-app="">
<p ng-hide="true">I am not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>