方向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>
时间： 2024-11-03 14:50:38