AngularJS: DOM HTML trong AngularJS
Giải phóng thời gian, khai phóng năng lực
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>
Giải phóng thời gian, khai phóng năng lực