声明

将输入域的值与 AngularJS 创建的变量绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<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 = "冷月心";
});
</script>

<p>使用 ng-model 指令来绑定输入域的值到控制器的属性。</p>

</body>
</html>
  • 效果图

Angular ng-model指令详解_angular

  • 代码解释
    • 关注点：上述代码可以看到在input控件里边本身并没有设置value值，但是显示界面却有数据
    • 仔细往下看，发现在控制器里边设置了name属性，而恰好这个属性与ng-model绑定的属性名一样
  • 说明
    • 个人觉得这个了解即可，没啥毛毛用，真想赋值，用自身的value属性或者angular的ng-init指令都比这个方便
    • 演示一下ng-init
      Angular ng-model指令详解_angular_02
    • 这种效果和上边一样
    • 此外，细心的可能发现上述代码实例化控制器以及设置属性方法和之前不太一样
    • 确实，1.4x以及之前的都是这种方式，之后不怎么用了,推荐以下写法
    • 实例化控制器：MainCtrl as mainCtrl
    • 定义属性：this.name=“tom”
    • 定义方法：this.say=function(){}
    • 不需要传参$scope

双向数据绑定

个人觉得这个是最常用的了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" >
	名字: <input ng-model="name">
		<h1>你输入的名字是: {{name}}</h1>
</div>
	<script>
		var app = angular.module('myApp', []);
	</script>
</body>
</html>

  • 效果图
    Angular ng-model指令详解_angular_03

  • 说明：双向数据绑定是最能突出angular特点的，数据变了，视图就变了

表单验证

时常会有这样一个错觉，angular是为表单验证而存在，当然这并不意味着正则表达式就凉了，angular的存在可以在一定程度上减轻使用正则的负担

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>
</html>
  • 为什么说是天生，举个例子

Angular ng-model指令详解_angular_04

*效果图
Angular ng-model指令详解_angular_05
Angular ng-model指令详解_angular_06

  • 说明
    • 写好的代码，审查元素会发现多了很多莫名其妙的类名，这就是angular自带的
    • 此外，angular自带正则，可以实时监听，比如表单值发生变化，数据是否合法，失去焦点和获得焦点
    • 当然，默认这些类都没有样式，用的话需要自定义
  • 代码解释
  • myForm.myAddress.$error.email
  • 输出一下myForm.myAddress.$error，结果如下
    Angular ng-model指令详解_angular_07
  • 这家伙是个对象，而对象中email的值是一个布尔值，配合ng-show刚刚好，数据不合法时显示

自定义类样式

  • 上边有提到，angular只是给你提供状态类，但默认都是没样式的
  • 自定义示例
<style>
	.ng-invalid {color:red;}
</style>
  • 效果图
    Angular ng-model指令详解_ng-model_08

常用应用状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
​
<form ng-app="" name="myForm" ng-init="myText = 'aaa@qq.com'">
​
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
​
</form>
​
</body>
</html>
​
  • 效果图
    Angular ng-model指令详解_angular_09