آموزش کار با اعلان Directive AngularJS ng-model
اعلان ng-model directive در AngularJS مقادیر کنترل های HTML مانند کادر متن (input)، کادرهای انتخابی (select) و یا کادر متن بزرگ (textarea) را به اطلاعات برنامه (application (data متصل می کند.
به وسیله اعلان ng-model directive می توانید مقدار یک فیلد ورودی HTML را به یک متغیر در برنامه AngularJS متصل کنید.
مثال عملی : در کد مثال عملی زیر، با استفاده از یک اعلان ng-model، مقدار متغیر name را به کادر متن
< input>
متصل کرده ایم :
| کد مثال عملی |
| کد |
<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
اتصال و تغییرات اطلاعات در AngularJS یک فرآیند دو طرفه است. اگر کاربر مقدار درون فیلد AngularJS ورودی اطلاعات مثل کادر مان (input) را تغییر دهد، مقدار خاصیت AngularJS Properties نیز تغییر خواهد کرد.
مثال عملی : در کد مثال عملی زیر، اگر مقدار درون فیلد متنی را تغییر دهید، عبارت نمایش داده شده در صفحه نیز، تغییر می کند :
| کد مثال عملی |
| کد |
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
|
| خروجی |
|
آموزش اعتبارسنجی اطلاعات ورودی کاربر در AngularJS
اعلان ng-model می تواند امکان اعتبارسنجی اطلاعات ورودی در برنامه را بر حسب نوع داده (عدد، ایمیل یا ضروری بودن)، فراهم کند.
مثال عملی : در کد مثال عملی زیر، یک کادر متن (input) ایجاد کرده ایم که با استفاده از خواص type و اعلان 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-model برابر true باشد، نمایش داده خواهد شد.
راهنمایی :
اگر در کد مثال عملی فوق، خاصیت ng-model وجود نداشته باشد، AngularJS خودش یک نمونه برایتان ایجاد می کند.
آموزش تعیین وضعیت برنامه توسط AngularJS
اعلان ng-model directive در AngularJS، می تواند وضعیت اطلاعات برنامه (application (data را به چند صورت (نامتغیرinvalid، خطا error، نامتعارف dirty و یا لمس شده touched) مشخص کند.
مثال عملی : در کد مثال عملی زیر، مقدار عبارت درون کادر متن را به حالت های مختلف تغییر دهید. سپس مشاهده خواهید کرد، وضعیت های برنامه تغییر خواهند کرد :
| کد مثال عملی |
| کد |
<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 Class در AngularJS
اعلان ng-model می تواند برای المنت های HTML و بر حسب وضعیت آن ها، کلاس های CSS مختلف تعیین کرده یا از آن ها حذف کند.
مثال عملی : در کد مثال عملی زیر، یک کادر متن جهت ورود نام کاربری تعیین شده است. تا زمانی که کاربر متنی در آن وارد نکرده و وضعیت آن نامعتبر (invalid) است، رنگ پس زمینه کادر متن، آبی است. اما به محض ورود متن درون کادر متن و تبدیل وضعیت (Status) آن به معتبر (valid)، رنگ پس زمینه، سفید می شود :
| کد مثال عملی |
| کد |
<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 می تواند کلاس های CSS زیر را بر حسب وضعیت فیلد ورود داده، به آن اضافه یا حذف کند :
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine