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:"[e-mail]",

                     password:"123456"

              }

              $scope.restForm=function(){

                     //把初始值賦值給user,ng-model里使用這個值

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

              }

              $scope.restForm();

       });

</script>

當輸入框的值改變時，form里的值則同步；當點擊重置按鈕時，則值回到初始化狀態也就是設置為user里的值。