• ۲۹
  • مرداد
توضیحات
  • دسته‌بندی‌ها : آموزش جاوا اسکریپت
  • بازدید : 354
جلسه ۰۵ : آشنایی با دستورالعمل ng-model در AngularJS
  • جزئیات
  • نوع محتواآموزش تصویری

فیلم های آموزشی آکادمی پی وی لرن

  • آموزش های مرتبط

  • ۲۹
  • مرداد

جلسه ۰۵ : آشنایی با دستورالعمل ng-model در AngularJS

  • دسته‌بندی‌ها :
  • بازدید : 354

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون در بخش هایی که تاکنون ارائه شده است. خصوصا بخش اخیر با دستورالعمل ها و کاربرد آن ها بخوبی آشنا شدید. در ادامه ی این مباحث، در این بخش قصد داریم به مبحث آشنایی با دستورالعمل ng-model در AngularJS ، بپردازیم.

در آموزش های اخیر به کاربردهای دستورالعمل ها اشاره کردیم. و تاکید کردیم که یکی از کاربرد های مهم دستورالعمل ها نگهداری و اولویت بندی داده ها و مقادیر است. که در این مورد بیشتر از دستورالعمل ng-model ، استفاده می شود. در ادامه این آموزش بیشتر با این دستور العمل و نحوه استفاده از آن آشنا می شویم.

آشنایی با دستورالعمل ng-model در AngularJS

دستورالعمل ng-model مقدار کنترل های HTML را از جمله input, select, textarea را به داده های برنامه متصل می کند.

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

مثال : اتصال مقدار از html به متغیر AngularJS

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

مثال : 

دو کاربرد اتصال

اتصال هر دو کاربرد را در بر می گیرد. اگر کاربر مقدار درون فیلد ورودی را تغییر دهد، ویژگی AngularJS نیز مقدار آن را تغییر می دهد:

مثال : کاربرد اتصال

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

مثال : 

تایید ورودی کاربر

دستورالعمل ng-model می تواند. اعتبار نوع داده های برنامه (شماره، ایمیل، مورد نیاز) را شناسایی کند:

 

مثال : تایید اعتبار نوع داده

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

مثال : 

در مثال بالا، span تنها زمانی نمایش داده می شود. که صفت ng-show  مقدار true را برگرداند.

نکته: اگر صفات در ویژگی ng-model وجود نداشته باشد، AngularJS یکی را برای شما ایجاد می کند.

وضعیت اپلیکیشن

دستورالعمل ng-model می تواند وضعیت داده های برنامه (نادرست، لمس، خطا و …) را تشخیص بدهد:

مثال : شناسایی وضعیت داده های برنامه

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

مثال : 

کلاس های CSS

دستورالعمل ng-model برای کلاسهای CSS در عناصر HTML، بسته به وضعیت آنها فراهم می شود:

مثال : کلاس های CSS

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

مثال : 

دستورالعمل ng-model با توجه به وضعیت فیلد فرم، کلاسهای زیر را اضافه می کند:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

کلام آخر

ما در بخش قبلی، شما را با ساختار کلی دستورالعمل ها در AngularJS و کاربرد های آن، آشنا کرده بودیم. در ادامه ی همان مباحث و در این بخش نیز، به یکی از مباحث مهم تحت عنوان آشنایی با دستورالعمل ng-model در AngularJS ، پرداختیم.

این پست را ارزیابی کنید
QR:  جلسه ۰۵ : آشنایی با دستورالعمل ng-model در AngularJS
به اشتراک بگذارید