مدل (Model)
دایرکتیو «ng-model» مقدار ورودی ها را به داده وصل می کند. «بایندینگ (Binding)» یعنی هماهنگی دوطرفه بین ورودی و نمایش. مثل دفتر نمره که همیشه با لیست کلاس هماهنگ می ماند.
آغاز کار با ng-model
اینجا ورودی به متغیر «name» در کنترلر وصل می شود. سپس مقدار اولیه در صفحه می آید.
<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>
بایندینگ دوطرفه (Two-Way Binding)
با تغییر ورودی، مقدار متغیر هم تغییر می کند. نمایش نیز همزمان عوض می شود.
<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>
نکته: اگر ویژگی در ng-model نباشد، خود AngularJS می سازد.
وضعیت های فرم و فیلد
می توانید وضعیت هایی مثل valid، 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 خودکار
براساس وضعیت، کلاس هایی مثل ng-invalid اضافه می شود. می توانید ظاهر خطا را تغییر دهید.
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
گام های عملی
- برنامه را با ماژول و کنترلر بساز.
- ورودی را با ng-model به متغیر وصل کن.
- اعتبارسنجی تایپ و الزامی را فعال کن.
- کلاس های وضعیت را برای استایل خطا استفاده کن.
نکته: برای آشنایی با پایه ها، صفحه دایرکتیوها را ببین. سپس به بایندینگ داده برو.
جمع بندی سریع
- ng-model اتصال دوطرفه می دهد.
- اعتبارسنجی ساده و مؤثر است.
- وضعیت ها برای نمایش خطا مفیدند.
- کلاس های CSS خودکار اعمال می شوند.