菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS ng-model 指令


ng-model 指令将 HTML 控件(input、select、textarea)的值绑定到应用程序数据。


ng-model 指令

使用 ng-model 指令,您可以将输入字段的值绑定到 AngularJS 中创建的变量。

示例

<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 = "John Doe";
});
</script>
自己动手试一试 »

双向绑定

绑定是双向的。如果用户更改输入字段中的值,AngularJS 属性的值也会更改。

示例

<div ng-app="myApp" ng-controller="myCtrl">
  姓名:<input ng-model="name">
  <h1>您输入了:{{name}}</h1>
</div>
自己动手试一试 »


验证用户输入

ng-model 指令可以为应用程序数据提供类型验证(数字、电子邮件、必需)。

示例

<form ng-app="" name="myForm">
  电子邮件
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">无效的电子邮件地址</span>
</form>
自己动手试一试 »

在上面的示例中,span 仅在 ng-show 属性中的表达式返回 true 时显示。

如果 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}}
</form>
自己动手试一试 »

CSS 类

ng-model 指令根据表单字段的状态为 HTML 元素提供 CSS 类。

示例

<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
  输入您的姓名
  <input name="myName" ng-model="myText" required>
</form>
自己动手试一试 »

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

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持