方向1：模型数据（model） 绑定 到视图（view）
实现方法1：{{model变量名}}
$scope.num=10
<p>{{num}}</p>
实现方法2： 常用指令（ngRepeat、ngIf、ngShow/Hide/Src....）
$scope.list=[{name:'sam',age:22},{name:'tom',age:37},{name:'kim',age:28}]
<tr ng-repeat='std in list'>
<td>{{std.name}}</td>
<td>{{std.age}}</td>
</tr>
方向2：将视图（view）中用户输入的数据 绑定到 模型数据（model）
实现方法：ngModel指令 用在表单组件中（input select textarea。。。）
PS:$watch监听模型变量值的改变------>执行指定的方法
$scope.$watch('变量名',function(){...});
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/angular.js"></script> 7 </head> 8 <body ng-controller="myCtro"> 9 10 <!--将多选框的勾选数据给model --> 11 复选框：<input type="checkbox" ng-model="isAgree"/> 12 <br> 13 14 <!--将选择框的model数据给ng-model--> 15 <!--ng-options 动态生成选项 --> 16 <select ng-model="sel2" ng-options="sel2.name for sel2 in selection"></select> 17 <p>{{sel2.name}}</p> 18 <script> 19 var app=angular.module('myApp',['ng']); 20 21 app.controller('myCtro',function($scope){ 22 //$watch可以监听view数据是否改变，便于观察现象 23 $scope.$watch('isAgree',function(){ 24 console.log($scope.isAgree); 25 }); 26 $scope.$watch('sel',function(){ 27 console.log($scope.sel); 28 }); 29 30 $scope.selection=[ 31 {name:'model',value:5}, 32 {name:'modren',value:4}, 33 {name:'moon',value:1}, 34 {name:'morning',value:3} 35 ]; 36 //为select标签设置一个selected 选项 37 $scope.sel2=$scope.selection[1]; 38 39 $scope.$watch('sel2',function() { 40 console.log($scope.sel2.value); 41 }) 42 }) 43 </script> 44 </body> 45 </html>
3、利用ng-model ng-checked 双向数据传输 实现全选/部分选择的判断
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script> </head> <body ng-controller="myCtro"> <table> <thead> <tr> <th>请选择</th> <th>姓名</th> <th>生日</th> </tr> </thead> <tbody> <tr ng-repeat="tem in list"> <td> <input type="checkbox" ng-model="tem.ischecked" ng-checked="selectAll"/> </td> <td>{{tem.name}}</td> <td>{{tem.birthday}}</td> </tr> </tbody> </table> <input type="checkbox" ng-model="selectAll"/>全选/取消全选 <br/> <button ng-click="getMsg()">查看</button> <script> var app=angular.module('myApp',['ng']); app.controller('myCtro',function($scope){ $scope.list=[ {name:'Michael',birthday:'2016-05-01',ischecked:false}, {name:'Golden',birthday:'2016-05-04',ischecked:false} ]; //监听的目的：通过全选或者取消全选时，ng-checked方向1的绑定确实会生效 //当时不会直接修改 //$watch=onchange $scope.$watch('selectAll',function(){ angular.forEach($scope.list,function(value,key){ $scope.list[key].ischecked=$scope.selectAll; }) }); $scope.getMsg=function(){ var str=""; //遍历的一种方法 angular.forEach($scope.list,function(value,key){ console.log(value); if(value.ischecked){ str+=value.name+"被选中了"; } }); if(str===""){ str='什么都没选中'; } alert(str); } }); </script> </body> </html>
