AngularJS model ！

  

 今天开始学习AngularJS的model部分！

 model 模型。

它用于绑定应用程序数据到HTML控制器（input，select，textarea）里面

它这个可以使你所输入的数据和AngularJS创建的变量绑定。

简单说，现在上代码：

<script src="angular.js-1.6.4/angular.min.js"></script>
<div ng-app="myapp" name="Myform" ng-controller="Myctrl">
姓:<input type="text" ng-model="firstName">
<br>
名:<input type="text"  ng-model="lastName">
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
angular.module("myapp",[])	
.controller('Myctrl',function($scope)
{
	$scope.firstName="Jhon";
	$scope.lastName="Deo";
	});

</script>

在这里，在controller里面有$scope作用域，可以把$scope当成一个参数传递。

在controller里面控制了firstName，和lastName的值。但是在<div>...<div>里面的input里面有ng-model的名称分别对应controller里面的值域。

在网页上显示的结果是：

当你去改变输入框的值之后，下面的姓名也会进行修改。 这又算实现了双向绑定，你修改了输入框里面的数据，在下面AngularJS表达式里面所代表的内容又发生了改变！！

！

对于这个model你可以在输入框里面，或者文本域，选择框里面去定义一个model，然后可以在下面app.controller里面再去实现具体的内容，并且可已修改。

现在，只有输入了，可以改变，但是在实际中会有一些必须填写的内容，现在把姓，这一框中设置为，无内容的时候，后面提醒：这一栏必须要填写。

看代码。

<script src="angular.js-1.6.4/angular.min.js"></script>
<form ng-app="myapp" name="Myform" ng-controller="Myctrl">
 姓:<input type="text" name="firstname"  ng-model="firstName" required>
<span style="color:red" ng-show="Myform.firstname.$dirty && Myform.firstname.$invalid">
<span ng-show="Myform.firstname.$error.required">必须填写姓！</span>
</span>
<br>
名:<input type="text"  ng-model="lastName">
<br>
姓名: {{firstName + " " + lastName}}
</form>
<script>
angular.module("myapp",[])	
.controller('Myctrl',function($scope)
{
	$scope.firstName="Jhon";
	$scope.lastName="Deo";
	});

</script>

原来写代码的时候，ng-app放在了<div>里面，现在用到了这个输入验证后，把<div>换成了<form>只有改为<form>里面才可以去实现这个功能。。。

///我想改为form的原因，可能就是在这个<form>.....</form>里面的东西需要去提交验证！因此要使用<form></form>而不是<div></div>zai

在这里需要拓展一点了。 在必须填写姓这行和上面的两行出现的$invalid和$dirtry的作用。，还有做这个功能的时候在<input>后面必须要有required

$invalid 证明字段内容是非法的     $dirty检验表单是否填写内容。还有两个常用的是： $pristine  表单没有填写记录  $valid字段内容是合法的。

简单来说我上面所写代码，在网页上显示出来，一开始是和上面姓，名，是没差别的，但是当，姓那一框里面没有内容的时候，会出现：

造成的结果是这样子的。

   个人总结，model是可以去绑定数值，并且去修改数值的时候，有双向绑定！

//以上均是个人看法，若有不对之处，请下方评论： 必细心修改，虚心学习！