Jassif Team Institution

AngularJS படிவங்கள்

AngularJS இல் படிவங்கள் உள்ளீட்டுக் கட்டுப்பாடுகளுக்கு தரவு-பைண்டிங் மற்றும் சரிபார்ப்பு வசதிகளை வழங்குகின்றன.

உள்ளீட்டுக் கட்டுப்பாடுகள்

உள்ளீட்டுக் கட்டுப்பாடுகள் HTML உள்ளீட்டு உறுப்புகள் ஆகும்:

• input உறுப்புகள்
• select உறுப்புகள்
• button உறுப்புகள்
• textarea உறுப்புகள்

தரவு-பைண்டிங்

உள்ளீட்டுக் கட்டுப்பாடுகள் 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 ஆக இருக்கும்.

செலக்ட்பாக்ஸ்

உங்கள் பயன்பாட்டுடன் செலக்ட்பாக்ஸ்களை ng-model டைரக்டிவ் மூலம் இணைக்கவும்.

ng-model பண்புக்கூறில் வரையறுக்கப்பட்ட பிராபர்டி செலக்ட்பாக்ஸில் தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பைக் கொண்டிருக்கும்.

எடுத்துக்காட்டு

தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பின் அடிப்படையில் சில உரையைக் காட்டவும்:

<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 ஆக இருக்கும்.

AngularJS படிவ எடுத்துக்காட்டு

பயன்பாட்டு குறியீடு

<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 இல் புதிதாக உள்ளது.

இது எந்தவொரு இயல்புநிலை பிரௌசர் சரிபார்ப்பையும் முடக்குகிறது.

எடுத்துக்காட்டு விளக்கம்

பயிற்சிகள்