غیرفعال کردن عنصرهایی مثل دکمه (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) در حالت فعال می باشد :
