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

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

باسلام در قسمت پنجم از اموزش های انگولار جی اس به بررسی چگونگی ایجاد دستورالعمل 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 مراجعه فرمایید.

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

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

یاعلی


برچسب ها : angularjs، ng-model در انگولار

دیدگاه تازه ای بنویسید