Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
بررسی دستورالعمل ng-model در انگولار

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

13342

Calendar-amico (2)

تاریخ انتشار:

27 , آذر , 1397

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

با سلام در قسمت پنجم از آموزش‌های انگولار جی اس به بررسی چگونگی ایجاد دستورالعمل ng-model در AngularJS می‌پردازیم.
پیشنهاد می‌شود پیش از ورود به این قسمت تمامی قسمت‌های قبل انگولار جی اس را مطالعه فرمایید برای ورود به لیست تمامی قسمت‌ها روی کلمه‌ی AngularJS کلیک کنید.

دستورالعمل ng-model در انگولار

دستورالعمل ng-model مقادیر کنترل‌کننده در HTML مانند (ورودی (input)، انتخاب (select)، ناحیه‌ی متنی (textarea)) را به داده‌های برنامه‌ی آنگولار متصل می‌کند.
به‌وسیله‌ی دستورالعمل ng-model شما می‌توانید مقدار یک فیلد ورودی را به یک متغیر ایجادشده در Angular JS متصل کنید.
به مثال زیر دراین‌باره توجه فرمایید:

اتصال دو طرفه

این نوع اتصال هم‌مقدار واردشده در فیلد را عوض کرده و هم‌مقدار ورودی برنامه را عوض می‌کند.
به مثال زیر دراین‌باره توجه فرمایید:

ورودی کاربر را تأیید کنید!

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

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

وضعیت برنامه

دستورالعمل مدل ng می‌تواند وضعیت داده‌های برنامه (معتبر، کثیف، لمس، خطا) را فراهم کند:

کلاس های css

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

همچنین علاوه بر مثال بالا در صورت نیاز می‌توانید هریک از موارد زیر را به کلاس‌های خود اضافه کنید:

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

برای مشاهده‌ی مطالب بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.

شما با موفقیت به انتهای قسمت پنجم این آموزش رسیدید!

در صورت سؤال داشتن می‌توانید از طریق کامنت ها با ما در تماس باشید!

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت پنجم AngularJS : دستورالعمل ng-model چه کاربردهایی دارد ؟"

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *