AngularJS ఫారమ్

అంగురల్ జిఎస్ లో ఫారమ్ ఇన్పుట్ కంట్రోలర్స్ డేటా బైండింగ్ మరియు పరిశీలన అందిస్తాయి.

ఇన్పుట్ కంట్రోలర్

ఇన్పుట్ కంట్రోలర్ హెచ్ఎంఎల్ ఇన్పుట్ అంతర్భాగాలు ఉంటాయి:

• ఇన్పుట్ అంతర్భాగం
• సెలెక్ట్ అంతర్భాగం
• బటన్ అంతర్భాగం
• టెక్స్ట్ ఏరియా అంతర్భాగం

డేటా బైండింగ్

ఇన్పుట్ కంట్రోలర్ ద్వారా ఉపయోగించబడుతుంది ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది ఇన్స్ట్రక్షన్ డేటా బైండింగ్ అందిస్తుంది.

<input type="text" ng-model="firstname">

ఇప్పుడు, అప్లికేషన్ లో ఒక పేరు ఉంది firstname యొక్క అంశం

ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది ఇన్స్ట్రక్షన్ ఇన్పుట్ కంట్రోలర్ ను అప్లికేషన్ యొక్క మిగతా భాగాలకు బైండ్ చేస్తుంది.

అంశం firstnameకంట్రోలర్ లో సూచించవచ్చు:

实例

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});

亲自试一试

ఇది అప్లికేషన్ యొక్క ఇతర స్థానాలలో కూడా ఉపయోగించబడవచ్చు:

实例

<form>
  పేరు: <input type="text" ng-model="firstname">
</form>
<h1>మీరు ఇచ్చిన పేరు: {{firstname}}</h1>

亲自试一试

చెక్ బటన్

చెక్ బటన్ యొక్క విలువ సరైన 或 తప్పుఉంది ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది ఇన్స్ట్రక్షన్ చెక్ బటన్ పై వర్తిస్తుంది మరియు మీ అప్లికేషన్ లో దాని విలువను వాడుతుంది.

实例

చెక్ బటన్ ఎంచుకునికండి ఉంటే శీర్షిక చూపిస్తుంది:

<form>
  శీర్షికను చూపించడానికి ఎంచుకొనండి:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">నా శీర్షిక</h1>

亲自试一试

రేడియో బటన్

使用 ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది ఇన్స్ట్రక్షన్ మీ అప్లికేషన్ కు రేడియో బటన్ ను బైండ్ చేస్తుంది.

అన్ని కలిగి ఉండే ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది యొక్క రేడియో బటన్ వివిధ విలువలు ఉండవచ్చు, కానీ ఎంచుకున్న విలువను మాత్రమే వాడుతారు.

实例

ఎంచుకున్న రేడియో బటన్ యొక్క విలువ ప్రకారం టెక్స్ట్ చూపిస్తుంది:

<form>
  ఒక విషయాన్ని ఎంచుకొనండి:
  <input type="radio" ng-model="myVar" value="dogs">డోగ్స్
  <input type="radio" ng-model="myVar" value="tuts">ట్యూట్షన్స్
  <input type="radio" ng-model="myVar" value="cars">కార్స్
</form>

亲自试一试

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది 指令将下拉选择框绑定到您的应用程序。

ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది 属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<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>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
});

亲自试一试

సహజంగా ప్రయత్నించండి novalidate

నూతన అంశం ఉన్నది HTML5 లో. ఇది ఏదైనా ప్రామాణిక బ్రౌజర్ పరిశీలనను నిరోధిస్తుంది

ఉదాహరణ వివరణ ng-app

ఆదేశం AngularJS అప్లికేషన్ను నిర్వచిస్తుంది ng-controller

ఆదేశం అప్లికేషన్ కంట్రోలర్ను నిర్వచిస్తుంది ng-model

ఆదేశం రెండు ఇన్పుట్ అంశాలను మోడల్లోని user పదార్థానికి బ్యాండ్ చేస్తుంది formCtrl మాస్టర్ కంట్రోలర్ కు reset() పద్ధతులు。

reset() పదార్థం ప్రారంభ విలువను సెట్ చేసి, నిర్వచిస్తుంది యూజర్ పదార్థం సమానంగా సెట్ చేయబడింది మాస్టర్ పదార్థం。

ng-click ఆదేశం బటన్ నొక్కడంతోనే కాల్ అవుతుంది reset() పద్ధతులు。

ఈ అప్లికేషన్లో novalidate అట్రిబ్యూట్ అవసరం లేదు, కానీ సాధారణంగా మీరు AngularJS ఫారమ్స్ లో దానిని ఉపయోగిస్తారు, ఇది ప్రామాణిక HTML5 పరిశీలనను తరచుగా ఆవరిస్తుంది.