با سلام در قسمت پنجم از آموزش‌های انگولار جی اس به بررسی چگونگی ایجاد دستورالعمل ng-model در AngularJS می‌پردازیم.
پیشنهاد می‌شود پیش از ورود به این قسمت تمامی قسمت‌های قبل انگولار جی اس را مطالعه فرمایید برای ورود به لیست تمامی قسمت‌ها روی کلمه‌ی AngularJS کلیک کنید.
دستورالعمل ng-model در انگولار
دستورالعمل ng-model مقادیر کنترل‌کننده در HTML مانند (ورودی (input)، انتخاب (select)، ناحیه‌ی متنی (textarea)) را به داده‌های برنامه‌ی آنگولار متصل میکند.
به‌وسیله‌ی دستورالعمل ng-model شما می‌توانید مقدار یک فیلد ورودی را به یک متغیر ایجادشده در Angular JS متصل کنید.
به مثال زیر دراین‌باره توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> نام: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Morteza Afzali"; }); </script> <p>از دستورالعمل ng-model استفاده کنید تا مقدار فیلد ورودی را به مالکیت ساخته شده در کنترل وارد کنید.</p> </body> </html> |
اتصال دو طرفه
این نوع اتصال هم‌مقدار واردشده در فیلد را عوض کرده و هم‌مقدار ورودی برنامه را عوض میکند.
به مثال زیر دراین‌باره توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> نام: <input ng-model="name"> <h1>نام وارد شده : {{name}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "مرتضی افضلی"; }); </script> <p>اگر شما نام داخل فیلد را عوض کنید مشاهده میکنید که نام ورودی عوض خواهد شد</p> </body> </html> |
ورودی کاربر را تأیید کنید!
دستورالعمل ng-model می‌تواند اعتبار نوع داده‌های برنامه (شماره، ایمیل، موردنیاز) را فراهم کند:
به مثال زیر دراین‌باره توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <form ng-app="" name="myForm"> ایمیل: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">متاسفانه ایمیل شما مورد تایید نیست!</span> </form> <p>اگر شما ایمیلی در فیلد متنی وارد کنید و نامعتبر باشد مقداری جلوی ان ظاهر خواهد شد که نمایش میدهد ایمیل شما معتبر نیست.</p> </body> </html> |
در مثال بالا، محتویات تگ span تنها زمانی نمایش داده می‌شود که بیان در ویژگی ng-show مقدار true را گرفته باشد.
وضعیت برنامه
دستورالعمل مدل ng می‌تواند وضعیت داده‌های برنامه (معتبر، کثیف، لمس، خطا) را فراهم کند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <form ng-app="" name="myForm" ng-init="myText = 'codepazofficial@gmail.com'"> اینیل: <input type="email" name="myAddress" ng-model="myText" required> <p>مقدار ایمیل را عوض کنید تا وضعیت جدید را ببینید.</p> <h1>وضعیت</h1> <p>معتبر: {{myForm.myAddress.$valid}} (اگر مقدار true بود ارزش با تمام معیارها مطابقت دارد).</p> <p>کثیف: {{myForm.myAddress.$dirty}} (اگر مقدار true بود یعنی متغییر عوض شده).</p> <p>لمس شده: {{myForm.myAddress.$touched}} (اگر مقدار true بود زمینه تمرکز شده است).</p> </form> </body> </html> |
کلاس های css
دستورالعمل ng-model برای کلاس‌های css برای عناصر HTML، بسته به وضعیت آنها فراهم می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> نام خود را وارد کنید: <input name="myName" ng-model="myText" required> </form> <p>اگر شما مقدار فیلد متنی را تغییر دهید بسته به وضعیت مقداری گرفته یا است میدهد.</p> <p><b>به یاد داشته باشید :</b> یک فیلد متنی با ویژگی "required" معتبر نیست زمانی که خالی است.</p> </body> </html> |
همچنین علاوه بر مثال بالا در صورت نیاز می‌توانید هریک از موارد زیر را به کلاس‌های خود اضافه کنید:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
برای مشاهده‌ی مطالب بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.
شما با موفقیت به انتهای قسمت پنجم این آموزش رسیدید!
در صورت سؤال داشتن می‌توانید از طریق کامنت ها با ما در تماس باشید!
