بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش دوازدهم

AngularJS Forms

یک form AngularJS شامل یک مجموعه از کنترل های ورود اطلاعات است.

HTML Controls

عناصر HTML input را کنترل های HTML می نامند:
•    input elements
•    select elements
•    button elements
•    textarea elements

HTML Forms

فرم های HTML عناصر HTML را با یکدیگر گروه بندی می کند.

مثال AngularJS Form

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش دوازدهم

AngularJS Forms

یک form AngularJS شامل یک مجموعه از کنترل های ورود اطلاعات است.

HTML Controls

عناصر HTML input را کنترل های HTML می نامند:
•    input elements
•    select elements
•    button elements
•    textarea elements

HTML Forms

فرم های HTML عناصر HTML را با یکدیگر گروه بندی می کند.

مثال AngularJS Form

 <div ng-app="" ng-controller="formController">
  <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>
function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};
</script> 

نکته: خاصیت novalidate برای غیرفعال کردن خاصیت validation پیش فرض مرورگر می باشد.

توضیح مثال

رهنمود ng-model عنصر های input را به model ما مقید می کند.
شی Model ما (master) دارای مقادیر {"firstName" : "John", "lastName" : "Doe"} می باشد.
تابع Model ما (reset) مقدار شی Model کاربر (user) را برابر master قرار می دهد.
 

مشاهده تمامی آموزش های دوره AngularJS