ఏంజులర్ జి ఎస్ మోడల్ ఆదేశం

ng-model ఆదేశం HTML కంట్రోల్స్ (input, select, textarea) యొక్క విలువను అనువర్తనం డాటాకు బంధించుతుంది.

ng-model ఆదేశం

ఉపయోగించండి ng-model ఆదేశాలు, మీరు ఇన్‌పుట్ ఫీల్డుల విలువను అనువర్తనం డాటాకు బంధించవచ్చు అని చెప్పవచ్చు.

实例

<div ng-app="myApp" ng-controller="myCtrl">
  పేరు: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

亲自试一试

ద్వంద్వపరమైన బైండింగ్

బైండింగ్ ద్వంద్వపరమైనది. ఉపయోగదారుడు ప్రవేశం ఫీల్డులోని విలువను మార్చినప్పుడు, AngularJS స్పేక్ట్రం కూడా అదే విలువను మార్చుతుంది:

实例

<div ng-app="myApp" ng-controller="myCtrl">
  పేరు: <input ng-model="name">
  <h1>మీరు ప్రవేశపెట్టారు: {{name}}</h1>
</div>

亲自试一试

వినియోగదారి ప్రవేశం పరిశీలన

ng-model ఆదేశాలు అనువర్తనం డాటా (సంఖ్య, ఇమెయిల్, తప్పనిసరి) రకం పరిశీలన అందిస్తాయి:

实例

  ఇమెయిల్:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">వలిదాను ఇమెయిల్ అంచనా లేదు</span>

亲自试一试

పైని ఉదాహరణలో, మాత్రమే ng-show అనునాయిక లోని అభ్యాసం తిరిగి అందిస్తుంది ట్రూ స్పాన్ చూపిస్తారు.

ఉన్నప్పుడు ng-model అనునాయిక లోని అనునాయిక లేకపోతే, AngularJS మీరు కోసం సృష్టిస్తుంది.

అనువర్తనం స్థితి

ng-model ఆదేశాలు అనువర్తనం డాటా స్థితిని (వలిదాను, మురికినది, టచ్, తప్పు) అందిస్తాయి:

实例

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  ఇమెయిల్:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>స్థితి</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}

亲自试一试

CSS క్లాస్

ng-model ఆదేశాలు HTML ఎలమెంట్ స్థితి ఆధారంగా CSS క్లాస్లను అందిస్తాయి:

实例

  Enter your name:
  

亲自试一试

ng-model 指令根据表单字段的状态添加/删除以下类：

• నైంగ్-ఎమ్పటీ
• నైంగ్-నాట్ ఎమ్పటీ
• నైంగ్-టచ్చడం లేని
• నైంగ్-అంటచ్చడం లేని
• నైంగ్-వాలిడ్
• నైంగ్-ఇన్వాలిడ్
• నైంగ్-డిర్టీ
• నైంగ్-పెండింగ్
• నైంగ్-ప్రిస్టిన్