آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

دایرکتیو AngularJS ng-model

 

دوره های آموزش AngularJS

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

دایرکتیو AngularJS ng-model

دایرکتیو ng-mode مقادیر کنترلی HTML(input,select,textarea) را به داده های برنامه پیوند می دهد.

دایرکتیو ng-model

شما با استفاده از دایرکتیو ng-model می توانید مقدار یک input را به متغیری که در AngularJS ساخته شده است، پیوند دهید.

نمونه 1

Name:
امتحان کنید

پیوند دو طرفه

پیوند می تواند دو طرفه باشد یعنی اگر کاربر مقدار ورودی را در input تغییر دهد، مقدار نظیر آن در AngularJS نیز تغییر کند:

نمونه 2

Name:

You entered: {{name}}

امتحان کنید

اعتبارسنجی مقدار input کاربر

دایرکتیو ng-model می تواند مقدار ورودی یک برنامه را اعتبارسنجی کند. به عنوان مثال مقدار ورودی یک input را صرفا از نوع number یا email قرار دهد و یا مقدار ورودی را الزامی (required) کند.

نمونه 3


    Email:
    
    Not a valid e-mail address
امتحان کنید

در مثال بالا،اگر عبارت داخل اتربیوت ng-show مقدار true  برگرداند، span نمایش داده خواهد شد.

نکته:اگر اتربیوت ng-model وجود نداشته باشد، AngularJS به صورت پیش فرض یک ng-model برای خود می سازد.

وضعیت یک برنامه کاربردی (Application Status)

دایرکتیو ng-model می تواند وضعیت داده های یک برنامه را به صورت invalid، dirty،  touched یا error مشخص کند.

نمونه 4

Email:

Status

{{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}}
امتحان کنید

کلاس های CSS

دایرکتیو ng-model با در نظر گرفتن وضعیت المان های HTML می تواند خاصیت کلاس های Css را به آنها اضافه کند.

نمونه 5




Enter your name:
امتحان کنید

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

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

 

  • 984
  •    2
  • تاریخ ارسال :   1394/12/20

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .