۲۹
مرداد

جلسه ۱۵ : کار با عناصر HTML DOM در AngularJS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در ادامه سری آموزشهای کامل AngularJS ، در آموزش این بخش، قصد داریم به مبحث آموزش چگونگی کار با عناصر HTML DOM در AngularJS ، بپردازیم. در این آموزش به طور خلاصه یاد خواهی گرفت که چه طور با استفاده از AngularJS به صفات عناصر HTML DOM دسترسی پیدا کرده و آن ها را تغییر دهید.

HTML DOM در واقع نمودار درختی ارتباط بین عناصر والد و فرزند است. که با استفاده از هر کدام از عناصر این درخت می توان به عناصر والد یا فزرند یا خواهر و برادر ، دست یافت.

کار با عناصر HTML DOM در AngularJS

AngularJS دارای دستورالعمل هایی برای اتصال داده های برنامه به صفات عناصر HTML DOM است.

دستور ng-disabled

دستورالعمل Ng-disabled داده های برنامه AngularJS را به ویژگی غیرفعال عناصر HTML متصل می کند.

مثال : عملکرد دستور `Ng-disabled`

خودتان امتحان کنید »

مثال :

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

<p>

<button ng-disabled="mySwitch">Click Me!</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch">Button

</p>

<p>

</p>

</div>

شرح مثال فوق:

دستورالعمل Ng-disabled داده های برنامه mySwitch را به ویژگی غیر فعال شده دکمه HTML متصل می کند.

دستورالعمل ng-model مقدار عدد چک باکس HTML را به value mySwitch متصل می کند.

اگر مقدار mySwitch به درستی برسد، دکمه غیرفعال خواهد شد:

مثال :

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

<p>

<button disabled>Click Me!</button>

</p>

اگر مقدار mySwitch با false برابر باشد. button غیر فعال نمی شود.

مثال :

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

<p>

<button>Click Me!</button>

</p>

دستور ng-show

دستور ng-show برای مخفی کردن یا نمایش عناصر html بکار می رود:

مثال: عملکرد دستور ng-show:

خودتان امتحان کنید »

مثال :

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

دستور ng-show عناصر html را بر اساس مقدار true یا false ، نمایش داده و یا مخفی می کند.

شما می توانید هر عبارتی را که درست یا غلط بودن را ارزیابی می کند استفاده کنید:

مثال : شکل دیگر مقدار دستور `ng-show`

خودتان امتحان کنید »

مثال :

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>

<p ng-show="hour > 12">I am visible.</p>

</div>

دستور ng-hide

دستور ng-hide نیز برای مخفی کردن یا نمایش عناصر html استفاده می شود:

مثال : عملکرد دستور ng-hide

خودتان امتحان کنید »

مثال :

<div ng-app="">

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

<p ng-hide="false">I am visible.</p>

</div>

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

<p ng-hide="false">I am visible.</p>

</div>

کلام آخر

در بررسی آموزش بخش کار با عناصر HTML DOM در AngularJS ، ما شما را با چگونگی دستکاری عناصر dom در AngularJS تا حدودی آشنا کردیم. امیدواریم که مطالب فوق به اندازه ی کافی برای شما مفید بوده باشد.

QR: جلسه ۱۵ : کار با عناصر HTML DOM در AngularJS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۵ : کار با عناصر HTML DOM در AngularJS

مقدمه

کار با عناصر HTML DOM در AngularJS

دستور ng-disabled

مثال : عملکرد دستور `Ng-disabled`

دستور ng-show

مثال: عملکرد دستور ng-show:

مثال : شکل دیگر مقدار دستور `ng-show`

دستور ng-hide

مثال : عملکرد دستور ng-hide

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۵ : کار با عناصر HTML DOM در AngularJS

مقدمه

کار با عناصر HTML DOM در AngularJS

دستور ng-disabled

مثال : عملکرد دستور Ng-disabled

دستور ng-show

مثال: عملکرد دستور ng-show:

مثال : شکل دیگر مقدار دستور ng-show

دستور ng-hide

مثال : عملکرد دستور ng-hide

کلام آخر

لیست مطالب دوره

مطالب ویژه

مثال : عملکرد دستور `Ng-disabled`

مثال : شکل دیگر مقدار دستور `ng-show`