با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون در بخش هایی که تاکنون ارائه شده است. خصوصا بخش اخیر با دستورالعمل ها و کاربرد آن ها بخوبی آشنا شدید. در ادامه ی این مباحث، در این بخش قصد داریم به مبحث آشنایی با دستورالعمل ng-model در AngularJS ، بپردازیم.
در آموزش های اخیر به کاربردهای دستورالعمل ها اشاره کردیم. و تاکید کردیم که یکی از کاربرد های مهم دستورالعمل ها نگهداری و اولویت بندی داده ها و مقادیر است. که در این مورد بیشتر از دستورالعمل ng-model ، استفاده می شود. در ادامه این آموزش بیشتر با این دستور العمل و نحوه استفاده از آن آشنا می شویم.
دستورالعمل ng-model
مقدار کنترل های HTML را از جمله input, select, textarea را به داده های برنامه متصل می کند.
با دستورالعمل ng-model
شما می توانید. مقدار یک فیلد ورودی را به یک متغیر ایجاد شده در AngularJS متصل کنید.
1 2 3 4 5 6 7 8 9 10 | <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 نیز مقدار آن را تغییر می دهد:
1 2 3 4 | <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> <h1>You entered: {{name}}</h1> </div> |
دستورالعمل ng-model
می تواند. اعتبار نوع داده های برنامه (شماره، ایمیل، مورد نیاز) را شناسایی کند:
1 2 3 4 5 | <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
می تواند وضعیت داده های برنامه (نادرست، لمس، خطا و …) را تشخیص بدهد:
1 2 3 4 5 6 7 8 | <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> |
دستورالعمل ng-model
برای کلاسهای CSS در عناصر HTML، بسته به وضعیت آنها فراهم می شود:
1 2 3 4 5 6 7 8 9 10 11 | <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
با توجه به وضعیت فیلد فرم، کلاسهای زیر را اضافه می کند:
ما در بخش قبلی، شما را با ساختار کلی دستورالعمل ها در AngularJS و کاربرد های آن، آشنا کرده بودیم. در ادامه ی همان مباحث و در این بخش نیز، به یکی از مباحث مهم تحت عنوان آشنایی با دستورالعمل ng-model در AngularJS ، پرداختیم.