ng-model指令【angularJs第二篇】

MVC设计模型是angularJs的特征之一，M指的是模型，V当然是视图，C则是控制器，对于每个的含义相信大家一定都不在陌生。在MVC里模型既是数据和视图无法互通，只有通过控制器实现模型和视图同步问题。这里就有问题了？模型如何与控制器同步？视图又如何与控制器同步？不要怀疑当然是指令。ng-bind和ng-model这另个指令，ng-bind容易理解，控制器里定义的字段同步到视图上就是它。ng-model呢！！对的，是ng-model实现视图改变到数据模型的改变，数据模型的改变到视图的改变。不要说话，看例子：

页面效果：

 

html代码

<div ng-controller="myForm">

       <form>

              <label>账号</label>

              <input type="text" placeholder="请输入账号" ng-model="user.name">

              <label>密码</label>

              <input type="password" placeholder="密码是由字母、数字下划线组成" ng-model="user.password">

              <br><br>

              <button ng-click="restForm()">重置表单的值</button>

              <br><br>

              <p>form = {{user}}</p>

              <p>user = {{userInfo}}</p>

       </form>

</div>

 js

<script type="text/javascript">

       /*使用控制器进行初始化*/

       var myApp = angular.module('myApp',[]);

       myApp.controller('myForm',function($scope){

              $scope.userInfo={

                     name:"1468017149@qq.com",

                     password:"123456"

              }

              $scope.restForm=function(){

                     //把初始值赋值给user,ng-model里使用这个值

                      $scope.user= angular.copy($scope.userInfo);

              }

              $scope.restForm();

       });

</script>

当输入框的值改变时，form里的值则同步；当点击重置按钮时，则值回到初始化状态也就是设置为user里的值。