گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/04/31 - 12:17
كد :7724

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

در این مقاله درباره دستور العمل 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>

مشاهده نتیجه

 

کلاس های CSS

دستورالعمل ng-model امکان ایجاد کلاس برای تگ های Html براساس وضعیت آنها را دارد:

<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 امکان افزودن کلاس های زیر را با توجه به وضعیت فرم دارد:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

 

در صورت تمایل جهت مشاوره رايگان ، گرفتن قیمت طراحی سایت ، اطلاعات بيشتر و سفارش با ما تماس بگيريد.

نظرات كاربران :