AngularJS tut 15: AngularJS HTML DOM

0
(0)

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ử DOM HTML.


Chỉ thị ng-vô hiệu hóa

Các ng khuyết tật với phím tắt chỉ AngularJS dữ liệu ứng dụng vào thuộc tính tàn tật 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 được giải thích:

Lệnh ng-disable liên kết mySwitch dữ liệu ứng dụng với thuộc tính bị vô hiệu hóa của nút HTML .

Các ng mô hình chỉ thị liên kết với các giá trị của phần tử checkbox HTML để giá trị của mySwitch .

Nếu giá trị của mySwitch được đánh giá là true , nút sẽ bị vô hiệu hóa: 

<p>
<button disabled>Click Me!</button>
</p>

Nếu giá trị của mySwitch được đánh giá là false , nút sẽ không bị vô hiệu hóa: 

<p>
<button>Click Me!</button>
</p>


Chỉ thị ng-show

Lệnh ng-show hiển thị hoặc ẩn một 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à true hoặc false:

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, có nhiều ví dụ hơn, sử dụng cách nhấp vào nút để ẩn các phần tử HTML.


Chỉ thị ng-hide

Các ng-hide da chỉ thị hoặc hiển thị một 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ử »

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing