手册
目录
使用 ng-model 指令，您可以将输入字段的值绑定到在 AngularJS 中创建的变量。
<div ng-app="myApp" ng-controller="myCtrl">
Name: <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">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
运行实例 »点击 "运行实例" 按钮查看在线实例
ng-model 指令可以为应用程序数据（数字、电子邮件、必填项）提供类型验证：
<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form>运行实例 »
点击 "运行实例" 按钮查看在线实例
在上面的例子中，仅当 ng-show 属性中的表达式返回 true 时，才会显示 span。
如果 ng-model 属性中的属性不存在，AngularJS 将为您创建一个。
ng-model 指令可以提供应用程序数据的状态（有效、脏、触摸、错误）：
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
运行实例 »点击 "运行实例" 按钮查看在线实例
ng-model 指令根据 HTML 元素的状态提供 CSS 类：
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
运行实例 »点击 "运行实例" 按钮查看在线实例
ng-model 指令根据表单字段的状态添加/删除以下类：
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
