AngularJS HTML DOM

AngularJS cung cấp hướng dẫn để gán dữ liệu ứng dụng vào thuộc tính của phần tử DOM HTML.

Hướng dẫn ng-disabled

ng-disabled Hướng dẫn gán dữ liệu ứng dụng AngularJS vào thuộc tính disabled của phần tử HTML.

Mô hình AngularJS

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Nhấn tôi!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>

Thử ngay

Giải thích ứng dụng:

ng-disabled hướng dẫn áp dụng dữ liệu ứng dụng mySwitch gán hướng dẫn đến nút HTML disabled thuộc tính.

ng-model Hướng dẫn gán giá trị của phần tử kiểm tra HTML vào mySwitch giá trị của nó.

nếu mySwitch giá trị của truenếu vậy, nút sẽ bị vô hiệu hóa:

<p>
<button disabled>Nhấn tôi!</button>
</p>

nếu mySwitch giá trị của falsenếu vậy, nút sẽ không bị vô hiệu hóa:

<p>
<button>Nhấn tôi!</button>
</p>

Hướng dẫn ng-show

ng-show Hướng dẫn hiển thị hoặc ẩn phần tử HTML.

Mô hình AngularJS

<div ng-app="">  
<p ng-show="true">Tôi là visible.</p>  
<p ng-show="false">Tôi là không visible.</p>  
</div>

Thử ngay

ng-show Câu lệnh dựa trên ng-show củaGiá trịHiển thị (hoặc ẩn) phần tử HTML.

Bạn có thể sử dụng bất kỳ biểu thức được đánh giá là đúng hoặc sai nào:

Mô hình AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Tôi là visible.</p>
</div>

Thử ngay

Trong chương tiếp theo, sẽ cung cấp thêm ví dụ về cách sử dụng nhấn nút để ẩn phần tử HTML.

Câu lệnh ng-hide

ng-hide Câu lệnh ẩn hoặc hiển thị phần tử HTML.

Mô hình AngularJS

<div ng-app="">  
<p ng-hide="true">Tôi là không visible.</p>  
<p ng-hide="false">Tôi là可见的。</p>  
</div>

Thử ngay