AngularJS: DOM HTML trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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>

» Tiếp: Event trong AngularJS
« Trước: SQL trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!