ng 雙向數據綁定
阿新 • • 發佈：2017-06-06
head image title nbsp img 常見 back style ng-model
1、方向1：model->View模型數據綁定到視圖
綁定的方式：①雙花括號 ②常見的ng指令（ngRepeat ngIf ngShow....）
效果：數據一旦綁定到視圖上，隨著數據的修改，視圖會自動更新。
例子：點擊按鈕，實現數字的自增（count++），並顯示在視圖中。
對比：
DOM操作方式：查找元素、操作元素
angular：修改model數據
2、方向2：View->Model將視圖中用戶的輸入/操作 綁定到模型數據
實現方式： ngModel
雙向數據綁定：ngModel可以實現雙向數據綁定，將定義好的模型數據綁定到視圖，也可以將用戶的輸入的結果綁定到數據上。
結果：
代碼：
<html ng-app="myModule"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <input type="text" ng-model="inputTxt"/> <h1>{{inputTxt}}</h1> </div> <script> var app=angular.module(‘myModule‘,[‘ng‘]); app.controller(‘myCtrl‘,function($scope){ $scope.inputTxt = ‘‘; }) </script> </body> </html>
結果：
代碼：
<html ng-app="myModule"> <head lang="en"><meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <input type="text" ng-model="inputTxt"/> <h1>{{inputTxt}}</h1> </div> <script> var app=angular.module(‘myModule‘,[‘ng‘]); app.controller(‘myCtrl‘,function($scope){ $scope.inputTxt = ‘zhang‘; }) </script> </body> </html>
ng 雙向數據綁定