با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون کار با عناصر مختلف html را از جمله لیست های کشویی و جداول در AngularJS را بررسی کرده ایم. در این بخش از ادامه ی آموزش های AngularJS ، قصد داریم. به مباحث چگونگی کار با عناصر فرم ها در AngularJS و کار با عنصر Radio button در AngularJS ، بپردازیم.
ما در این آموزش، شما را با انواع فرم های ورودی و انتخابگر های فرم ها ی html در کد AngularJS آشنا می کنیم. همچنین برای درک بهتر آموزش ها ، مثال هایی از کد های html و آنگولار را نیز در متن آموزش قرار داده ایم.
فرم های موجود در AngularJS قابلیت اتصال به داده ها و اعتبار سنجی کنترل های ورودی را فراهم می کند.
در کنترل های input ، ارتباط با داده ها با دستور ng-model
ممکن می شود.
1 | <input type="text" ng-model="firstname"> |
اکنون برنامه یک ویژگی با نام firstname
دارد.
دستور ng-model
عنصر input را به مابقی برنامه متصل می کند.
ویژگی firstname
می تواند به یک کنترلر اشاره کند.
1 2 3 4 5 6 | <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; }); </script> |
شما همچنین می توانید به جای دیگری از برنامه اشاره کنید:
1 2 3 4 5 | <form> First Name: <input type="text" ng-model="firstname"> </form> <h1>You entered: {{firstname}}</h1> |
یک عنصر checkbox دارای دو مقدار true
و false
است. دستور ng-model
را به checkbox اعمال کرده و از مقادیر آن در برنامه استفاده کنید.
1 2 3 4 5 6 | <form> Check to show a header: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">My Header</h1> |
از دستور ng-model
در عناصر radio button برنامه استفاده کنید.
عناصر Radio button با استفاده از دستور ng-model
مقدارهای متفاوتی خواهد داشت اما فقط عنصر انتخاب شده، قابل استفاده خواهد بود.
1 2 3 4 5 6 | <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
خواهد بود.
از دستور ng-model
در آپشن های عناصر select box برنامه استفاده کنید.
ویژگی ng-model
در واقع مقدار آپشن انتخاب شده در select box را تعریف می کند.
1 2 3 4 5 6 7 8 9 | <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
خواهد بود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> |
دستور Ng-app برنامه AngularJS را تعریف می کند.
دستورالعمل ng-controller کنترل کننده برنامه را تعریف می کند.
دستورالعمل ng-model دو عنصر ورودی را به شیء کاربر در مدل متصل می کند.
کنترل کننده formCtrl
مقادیر اولیه را به شی اصلی متصل می کند. و متد ()reset
را تعریف می کند.
متد ()reset
شیء کاربر را برابر با شی اصلی می گیرد.
دستور ng-click متد ()reset
را فقط در صورتی که دکمه روی آن کپی شده باشد را فراخوانی می کند.
ویژگی novalidate برای این برنامه مورد نیاز نیست، اما به طور معمول شما از آن در فرم های AngularJS استفاده می کنید. تا اعتبار استاندارد HTML5 را لغو کنید.
در مطالب فوق، چگونگی کار با بخش های مهم عناصر فرم ها در AngularJS را بطور کامل بررسی کردیم. با مرور مباحث فوق، شما می توانید عناصر فرم های html را با کد AngularJS دستکاری کرده و برای آن فعالیت تعریف کنید. امیدواریم که از مباحث این آموزش، به اندازه کافی استفاده کرده باشید.