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



  • ۲۹
  • مرداد

جلسه ۱۷ : کار با عناصر فرم ها در AngularJS

  • دسته‌بندی‌ها :
جلسه ۱۷ : کار با عناصر فرم ها در AngularJS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون کار با عناصر مختلف html را از جمله لیست های کشویی و جداول در AngularJS را بررسی کرده ایم. در این بخش از ادامه ی آموزش های AngularJS ، قصد داریم. به مباحث چگونگی کار با عناصر فرم ها در AngularJS و کار با عنصر Radio button در AngularJS ، بپردازیم.

      ما در این آموزش، شما را با انواع فرم های ورودی و انتخابگر های فرم ها ی html در کد AngularJS آشنا می کنیم. همچنین برای درک بهتر آموزش ها ، مثال هایی از کد های html  و آنگولار را نیز در متن آموزش قرار داده ایم.

      کار با عناصر فرم ها در AngularJS

      فرم های موجود در AngularJS قابلیت اتصال به داده ها و اعتبار سنجی کنترل های ورودی را فراهم می کند.

      کنترل های input

      • input elements
      • select elements
      • button elements
      • textarea elements

      data-binding یا اتصال داده ها

      در کنترل های input ، ارتباط با داده ها با دستور ng-model ممکن می شود.

      مثال : 

      اکنون برنامه یک ویژگی با نام firstname دارد.

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

      ویژگی firstname می تواند به یک کنترلر اشاره کند.

      مثال : افزودن ویژگی firstname

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

      مثال : 

      شما همچنین می توانید به جای دیگری از برنامه اشاره کنید:

      مثال : اشاره به بخش دیگری در برنامه

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

      مثال : 

      عنصر checkbox

      یک عنصر checkbox دارای دو مقدار true و false است. دستور ng-model را به checkbox اعمال کرده و از مقادیر آن در برنامه استفاده کنید.

      مثال : کار با checkbox

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

      مثال : 

      کار با عنصر Radio button

      از دستور ng-model در عناصر radio button برنامه استفاده کنید.

      عناصر Radio button با استفاده از دستور ng-model مقدارهای متفاوتی خواهد داشت اما فقط عنصر انتخاب شده، قابل استفاده خواهد بود.

      مثال : کار با عنصر Radio button

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

      مثال : 

      مقادر myVar بین مقادیر dogstuts  یا cars خواهد بود.

      کار با عنصر Selectbox

      از دستور ng-model در آپشن های عناصر select box برنامه استفاده کنید.

      ویژگی ng-model در واقع مقدار آپشن انتخاب شده در select box را تعریف می کند.

      مثال : کار با عنصر select box

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

      مثال : 

      مقادر myVar بین مقادیر dogstuts  یا cars خواهد بود.

      مثالی از فرم آنگولار

      مثال : کد ایجاد فرم نمونه

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

      مثال : 

      تشریح مثال فوق

      دستور Ng-app برنامه AngularJS را تعریف می کند.

      دستورالعمل ng-controller کنترل کننده برنامه را تعریف می کند.

      دستورالعمل ng-model دو عنصر ورودی را به شیء کاربر در مدل متصل می کند.

      کنترل کننده formCtrl مقادیر اولیه را به شی اصلی متصل می کند. و متد ()reset را تعریف می کند.

      متد ()reset شیء کاربر را برابر با شی اصلی می گیرد.

      دستور ng-click متد ()reset  را فقط در صورتی که دکمه روی آن کپی شده باشد را فراخوانی می کند.

      ویژگی novalidate برای این برنامه مورد نیاز نیست، اما به طور معمول شما از آن در فرم های AngularJS استفاده می کنید. تا اعتبار استاندارد HTML5 را لغو کنید.

      کلام آخر

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

      QR:  جلسه ۱۷ : کار با عناصر فرم ها در AngularJS
      به اشتراک بگذارید