در این قسمت از آموزش های انگولار جی اس به بررسی HTML DOM خواهیم پرداخت. پیشنهاد می‌شود قبل از ورود به این آموزش قسمت‌های پیشین دوره angularjs را مطالعه فرمایید.
آنگولار HTML DOM
انگولار جی اس دارای دستورالعمل‌هایی است برای اتصال داده‌های برنامه به صفات عناصر HTML DOM می‌باشد.
دستورالعمل ng-disabled
دستورالعمل ng-disabled در انگولار اتصال داده‌های برنامه به‌ویژگی disbled در عناصر HTML است.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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-disabled داده‌های برنامه را متصل می‌کند به mySwitch که واقع در صفت disabled HTML می‌باشد.
دستورالعمل ng-model مقدار چک باکس را به مقدار mySwitch متصل می‌کند.
هنگامی‌که مقدار mySwitch برابر با true قرار گیرد، دکمه غیرفعال می‌شود.
|
1 2 3 |
<p> <button disabled="">Click Me!</button> </p> |
هنگامی‌که مقدار mySwitch برابر با false قرار گیرد، دکمه فعال می‌شود.
|
1 2 3 4 |
<p> <button>Click Me!</button> </p> <br> |
دستورالعمل ng-show
دستورالعمل ng-show داده‌های HTML را نمایان یا مخفی می‌کند
|
1 2 3 4 |
<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 ارزیابی‌شده است استفاده کنید:
|
1 2 3 |
<div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">I am visible.</p> </div> |
دستورالعمل ng-hide
دستورالعمل ng-hide نیز مانند دستورالعمل ng-show عمل می‌کند با این تفاوت که مقدار true برای این دستورالعمل داده‌ها را مخفی می‌کند.
|
1 2 3 4 |
<div ng-app=""> <p ng-hide="true">I am not visible.</p> <p ng-hide="false">I am visible.</p> </div> <br> |
ممنون که تا انتهای این آموزش هم همراه ما بودید.
برای مطالعه بیشتر درباره این آموزش می‌توانید به سایت w3schools مراجعه فرمایید.
پیشنهاد می‌شود اگر اطلاعات بیشتری درباره‌ی جاوا اسکریپت یا angularjs می‌خواهید بر روی نوشته‌های این زبان‌ها کلیک کنید تا وارد صفحه‌ی فهرست عناوین این آموزش‌ها شوید.
امیدوارم که این آموزش کدپز هم برای شما عزیزان مفید واقع‌شده باشد.
در صورت داشتن هرگونه سؤال از طریق کامنت ها و یا شبکه‌های اجتماعی می‌توانید با ما در ارتباط باشید.
پیروز باشید.
