در این مقاله نحوه اتصال داده به مقادیر موجود در کنترلرهای فرم را با کمک آنگولارجی اس بررسی می کنیم.
فرم ها در آنگولار امکان اتصال دادهها و تعیین اعتبار مقدار ورودی کنترلرهای فرم را دارند.
کنترلرهای وروردی فرم
در Html چند نوع کنترلر ورودی برای فرم ها داریم که عبارتند از:
input elements
select elements
button elements
textarea elements
اتصال داده ها
کنترلرهای ورودی امکان اتصال داده ها را با استفاده از دستورالعمل ng-model را دارا می باشند.
<input type="text" ng-model="firstname">
در این نرم افزار ما با دستور بالا یک نام firstname را تعریف کرده ایم.
دستورالعمل ng-model میتواند به داده های داخل یک کنترل ورودی متصل شود و مقدار firstname را ریست کرده و آنرا به کنترلر ارجاع دهد:
مثال:
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
مشاهده نتیجه
این کد ها میتواند به مکان دیگری از نرم افزار نیز ارجاع داده شوند:
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
مشاهده نتیجه
چک باکس ها
چک باکس دو مقدار True یا false را بخود میگیرد میتوان دستور العمل ng-model را به یک چک باکس ارائه داد و از مقدار آن در نرم افزار استفاده کرد.
مثال:
نمایش هدر در صورت تیک خوردن چک باکس:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
مشاهده نتیجه
دکمه های رادیویی :
اتصال دکمه های رادیویی به دستورالعمل ng-model
دکمه های رادیویی با همان ng-model میتوانند مقادیر مختلفی را ارجاع دهند ، ولی تنها دکمه انتخاب شده مورد استفاده قرار خواهد گرفت.
مثال:
نمایش یک متن ، بر اساس دکمه رادیویی انتخاب شده:
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
مشاهده نتیجه
مقدار myVar میتواند تنها یکی از سه مقدار dogs,tuts,cars باشد.
Selectbox:
اتصال یک select boxes یا همان منوی بازشو به نرم افزار خود با کمک دستورالعمل ng-model.
ویژگی تعریف شده در صفت ng-model دارای عنصر انتخاب شده در selected option خواهد بود.
مثال
نمایش متن بر اساس عنصر انتخاب شده در یک selected option :
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
مشاهده نتیجه
مقدار myVar میتواند یکی از سه عنصر dogs,tuts,cars باشد.
کد نرم افزار
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
مشاهده نتیجه
صفت novalidate در Html5 تعریف شده است و هر تعیین صفت پیشفرضی را غیر فعال می کند.
توضیح مثال:
دستورالعمل :ng-app نرم افزار آنگولار را تعریف می کند.
دستورالعمل ng-controller کنترلرهای نرم افزار را تعریف می کند.
دستورالعمل ng-model دو تگ ورودی را با شیئ user در model ترکیب می کند.
کنترلر formCtrl مقدار ثابت را به شئی master میدهد و متد reset() را تعریف می کند.
متد reset() شیئ user را برابر با شیئ master قرار میدهد.
دستورالعمل ng-click هنگام کلیک شدن روی دکمه متد reset() را اجرا میکند.
در این نرم افزار به صفت novalidate نیازی نیست ، ولی این صفت معمولا در فرم های آنگولار استفاده میشود. به این ترتیب مقدار استاندارد در Html5 بازنویسی میشود.
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد