AngularJS: DOM HTML trong AngularJS


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript

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>


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript
« Prev: AngularJS: SQL trong AngularJS
» Next: AngularJS: Event trong AngularJS
Copied !!!