آموزش AngularJS
بستن دسته بندی
۱۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
نمایش دسته بندی ها (۱۵ آموزش)
مباحث اولیه برای آشنایی با AngularJS
مباحث اولیه برای آشنایی با AngularJS
8
فرم ها (Form)، در AngularJS
فرم ها (Form)، در AngularJS
3
فهرست ها (List)، در AngularJS
فهرست ها (List)، در AngularJS
0
جدول ها (Table)، در AngularJS
جدول ها (Table)، در AngularJS
1
مباحث عمومی، در AngularJS
مباحث عمومی، در AngularJS
3

نویسنده علیرضا گلمکانی
شماره کلید 26282
گزینه ها

غیرفعال کردن عنصرهایی مثل دکمه (Button) یا فیلد (Field) ساخته شده توسط تگ input در فرم (Form)، با دستور دهنده ng-disabled ، در AngularJS

همان طور که می دانید، مشخصه disabled در HTML برای غیرفعال کردن عنصرهایی مثل دکمه (Button) یا فیلد (Field) ساخته شده توسط تگ input (یا تگ های دیگر) در فرم (Form)، به کار می رود ( کلید شماره 26281 - کلید شماره 26280 ). به این صورت که اگر مقدار true را برای مشخصه disabled ذکر می کردیم، آنگاه عنصر مورد نظر، غیرفعال می شد و یا اگر مقدار false را برای مشخصه disabled ذکر می کردیم، آنگاه عنصر مورد نظر به صورت عادی فعال می بود.

در چارچوب AngularJS ، یک دستور دهنده (Directive) با نام ng-disabled داریم که مقداری که برای آن تعیین شود را برای مشخصه disabled قرار می دهد. بنابراین اگر برای دستور دهنده ng-disabled ، مقدار true را قرار دهیم، همانند این است که برای مشخصه disabled آن عنصر، مقدار true قرار داده شده باشد و همچنین اگر مقدار false قرار داده شود، همانند این است که برای مشخصه disabled آن عنصر، مقدار false قرار داده شده باشد.

اگر بخواهیم به طور ساده، مقدار true یا false را برای دستور دهنده ng-disabled تعیین کنیم، می توانیم کدها را به صورت زیر بنویسیم :

طرح رنگ
طرح رنگ

اما کد بالا، یک مثال خیلی ساده است و قرار نیست که دستور دهنده ng-disabled را به صورت بالا مقداردهی کنیم، زیرا در این صورت می توانستیم از همان مشخصه disabled در HTML استفاده نماییم. بنابراین معمولا در چارچوب AngularJS ، نام یک متغیر را به عنوان مقدار متناظر با دستور دهنده ng-disabled تعیین می کنند و آنگاه مقدار متغیر می تواند توسط سایر بخش های کدهای AngularJS ، مقداردهی شود.

بنابراین چون نام یک متغیر برای دستور دهنده ng-disabled ذکر شده است، هر زمان با تغییر مقدار متغیر مورد نظر به true یا false ، می توانیم عنصر مورد نظرمان را به حالت فعال یا غیرفعال در بیاوریم.

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

طرح رنگ

در کد بالا، دو متغیر Kelidestan_Variable_1 و Kelidestan_Variable_2 را با استفاده از دستور دهنده ng-init ( کلید شماره 26193 )، به ترتیب برابر true و false تعریف نموده ایم :

طرح رنگ

سپس، با استفاده از تگ button ، دو دکمه (Button) ساخته ایم که برای هر دو تگ button ، دستور دهنده ng-disabled ذکر شده است و دو متغیر Kelidestan_Variable_1 و Kelidestan_Variable_2 را به عنوان مقدار آن دو دستور دهنده ng-disabled در نظر گرفته ایم :

طرح رنگ

کد کامل صفحه HTML :

طرح رنگ

نتیجه :

یکی از دکمه ها (Button) به صورت فعال و دیگری به صورت غیرفعال خواهد بود :

خطا - صفحه را دوباره بارگذاری کنید
مثال

مثالی از وب سایت w3schools.com :

بخش مهم کدها :

طرح رنگ

در کد بالا، ابتدا با استفاده از تگ input و تعیین مقدار checkbox برای مشخصه type آن تگ، یک جعبه انتخاب (Checkbox) ساخته ایم که اگر کاربر آن را انتخاب کند (با کلیک کاربر و نمایش علامت تیک در آن)، مقدار true در متغیر mySwitch ذخیره خواهد شد و اگر انتخاب نشده باشد، مقدار false در متغیر mySwitch ذخیره می گردد :

طرح رنگ

همچنین مقدار متغیر mySwitch با استفاده از عبارت (Expression) ( کلید شماره 26194 ) زیر در خروجی صفحه نمایش داده می شود :

طرح رنگ

با توجه به اینکه یک دکمه (Button) با تگ button ساخته ایم که در آن متغیر mySwitch به عنوان مقدار دستور دهنده ng-disabled ذکر شده است، هرگاه که مقدار متغیر mySwitch برابر true باشد، این دکمه (Button) در حالت غیرفعال خواهد بود و هر زمان که مقدار متغیر mySwitch برابر false باشد، این دکمه (Button) فعال می باشد :

طرح رنگ

بنابراین نتیجه کلی این است که هرگاه جعبه انتخاب (Checkbox) به حالت انتخاب شده (با علامت تیک) باشد، دکمه (Button) در حالت غیرفعال خواهد بود و هر زمان که تیک مربوط به جعبه انتخاب (Checkbox) را برداریم، دکمه (Button) در حالت فعال می باشد.

کد کامل صفحه HTML :

طرح رنگ

نتیجه :

هرگاه جعبه انتخاب (Checkbox) به حالت انتخاب شده (با علامت تیک) باشد، دکمه (Button) در حالت غیرفعال خواهد بود و هر زمان که تیک مربوط به جعبه انتخاب (Checkbox) را برداریم، دکمه (Button) در حالت فعال می باشد :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید

کپی برداری توسط سایر وب سایت ها، ممنوع بوده و پیگرد قانونی دارد. (بیشتر بدانید)

گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو
ویدئوهای آموزشی AngularJS (ویدئوهای رایگان از سایت های انگلیسی زبان)
بستن دسته بندی
۵۳
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

AngularJS tutorial for beginners
مجموعه ویدئوهای آموزشی AngularJS برای مبتدیان - مجموعه AngularJS tutorial for beginners
مجموعه ویدئوهای آموزشی AngularJS برای مبتدیان - مجموعه AngularJS tutorial for beginners
53