DOM (DOM)

اینجا درباره «DOM در AngularJS» صحبت می کنیم. «DOM» نقشه درختی صفحه است. داده برنامه را با «دیرکتیو (Directive)» به ویژگی های DOM وصل می کنیم. نتیجه سریع و تمیز می شود؛ مثل وصل کردن سیم باتری به چراغ.

ng-disabled: غیرفعال کردن دکمه با داده

ng-disabled مقدار داده را به ویژگی disabled وصل می کند. اگر مقدار true شود، دکمه غیرفعال می شود. تیک بزن، تغییر را ببین.

<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>

مشاهده در ادیتور

ng-show: نمایش شرطی المان

ng-show یک المان را نشان می دهد یا پنهان می کند. هر عبارت بولی قابل استفاده است. مثل قانون زنگ مدرسه: اگر ساعت بزرگ تر از 12 شد، پیام را نشان بده.

<div ng-app="" ng-init="hour=13">
  <p ng-show="hour > 12">I am visible.</p>
</div>

مشاهده در ادیتور

ng-hide: پنهان سازی ساده

ng-hide برعکس ng-show عمل می کند. اگر true باشد، المان پنهان می شود. اگر false باشد، دیده می شود.

<div ng-app="">
  <p ng-hide="true">I am not visible.</p>
  <p ng-hide="false">I am visible.</p>
</div>

مشاهده در ادیتور

گام های عملی

1. یک مدل ساده بساز؛ مثل mySwitch.
2. دیرکتیو مناسب را انتخاب کن.
3. شرط را کوتاه و خوانا بنویس.
4. تست کن و مقدارها را تغییر بده.

نکته: برای ادامه «DOM در AngularJS» به همین صفحه برگرد. همچنین بخش رویدادها و Select مکمل خوبی هستند.

جمع بندی سریع

• ng-disabled دکمه را شرطی غیرفعال می کند.
• ng-show با true نمایش می دهد.
• ng-hide با true پنهان می کند.
• عبارت ها ساده و قابل فهم باشند.