نحوه استفاده از دستورالعمل مدل در آنگولار

در این مقاله درباره دستور العمل ng-model در آنگولار صحبت خواهیم کرد.

آموزش طراحی سایت

دستور العمل ng-model مقدار موجود در کنتلرهای HTML(input, select, textarea) را با داده های نرم افزار ترکیب می کند.

دستور العمل ng-model

شما با کمک دستورالعمل ng-model میتوانید مقادیر موجود در فیلد 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>

مشاهده نتیجه

اتصال دوطرفه

یک اتصال دوطرفه است ، یعنی اگر کاربر مقدار موجود در فیلد input را تغییر دهد ، مقدار متغییر در آنگولارجی اس نیر تغییر خواهد کرد:

<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 مقدار درست را ارائه دهد. نمایش داده میشود.

نکته : در مثال بالا اگر که صفت ng-model وجود نداشته باشدT آنگولار این صفت را برایتان ایجاد خواهد کرد.

وضعیت نرم افزار

دستورالعمل ng-model میتواند وضعیت نرم افزار را در حالات زیر گزارش دهد(invalid, dirty, touched, error) :

<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>