مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون در بخش هایی که تاکنون ارائه شده است. خصوصا بخش اخیر با دستورالعمل ها و کاربرد آن ها بخوبی آشنا شدید. در ادامه ی این مباحث، در این بخش قصد داریم به مبحث آشنایی با دستورالعمل ng-model در AngularJS ، بپردازیم.
در آموزش های اخیر به کاربردهای دستورالعمل ها اشاره کردیم. و تاکید کردیم که یکی از کاربرد های مهم دستورالعمل ها نگهداری و اولویت بندی داده ها و مقادیر است. که در این مورد بیشتر از دستورالعمل ng-model ، استفاده می شود. در ادامه این آموزش بیشتر با این دستور العمل و نحوه استفاده از آن آشنا می شویم.
آشنایی با دستورالعمل ng-model در AngularJS
دستورالعمل ng-model مقدار کنترل های HTML را از جمله input, select, textarea را به داده های برنامه متصل می کند.
با دستورالعمل ng-model شما می توانید. مقدار یک فیلد ورودی را به یک متغیر ایجاد شده در AngularJS متصل کنید.
مثال :
| <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> |
دو کاربرد اتصال
اتصال هر دو کاربرد را در بر می گیرد. اگر کاربر مقدار درون فیلد ورودی را تغییر دهد، ویژگی AngularJS نیز مقدار آن را تغییر می دهد:
مثال :
| <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> <h1>You entered: {{name}}</h1> </div> |
تایید ورودی کاربر
دستورالعمل ng-model می تواند. اعتبار نوع داده های برنامه (شماره، ایمیل، مورد نیاز) را شناسایی کند:
مثال :
| <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> |
در مثال بالا، span تنها زمانی نمایش داده می شود. که صفت ng-show مقدار true را برگرداند.
نکته: اگر صفات در ویژگی ng-model وجود نداشته باشد، AngularJS یکی را برای شما ایجاد می کند.
وضعیت اپلیکیشن
دستورالعمل ng-model می تواند وضعیت داده های برنامه (نادرست، لمس، خطا و …) را تشخیص بدهد:
مثال :
| <form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <h1>Status</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form> |
کلاس های CSS
دستورالعمل ng-model برای کلاسهای CSS در عناصر HTML، بسته به وضعیت آنها فراهم می شود:
مثال :
| <style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> Enter your name: <input name="myName" ng-model="myText" required> </form> |
دستورالعمل 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 ، پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
