بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش نهم

AngularJS HTML DOM

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

DOM چیست؟

DOM) Document Object Model) یک رابط برنامه نویسی برای سندهای XML  و Html است . با استفاده از اینترفیس فوق، نحوه دستیابی و انجام پردازش های لازم در رابطه با سند های XML و Html فراهم می گردد . برنامه نویسان با استفاده از DOM ، قادر به ایجاد یک سند ،حرکت در طول ساختار سند، افزودن ، اصلاح و یا حذف المان های یک سند XML و یا Html می باشند . DOM توسط کنسرسیوم وب استاندارد و بمنظور استفاده از طریق زبان های برنامه نویسی متعددی طراحی شده است .

رهنمود ng-disabled 

رهنمود ng-disabled داده های برنامه AngularJS را به خاصیت disabled عناصر HTML مقید می کند

 <div ng-app="">

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

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

</div> 

توضیح برنامه

رهنمود ng-disabled داده ی mySwitch برنامه را به خاصیتdisabled  عنصر Button مقید می کند.
رهنمود ng-model مقدار عنصر CheckBox به مقدار mySwitch مقید می کند.
اگر مقدار mySwitch برابر true باشد button ما غیرفعال خواهد شد.

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

طبیعتا اگر مقدار mySwitch برابر false باشد button ما فعال خواهد شد.

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

رهنمود ng-show

رهنمود ng-show یک عنصر HTML را مخفی و یا نمایش می دهد.

 <div ng-app="">

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

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

</div> 

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

 <div ng-app="">

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

</div> 

در مقاله بعدی چندین مثال وجود دارد که با کلیک بر روی یک button عناصر مخفی می شوند.

رهنمود ng-hide 

رهنمود ng-hide می تواند عناصر HTML را مخفی و یا نمایش دهد.

<div ng-app="">

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

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

</div> 

مشاهده تمامی آموزش های دوره AngularJS