首页 > 代码库 > angular的双向数据绑定

angular的双向数据绑定

2024-08-24 08:23:15   221人阅读

方向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>

技术分享

 

　

 

angular的双向数据绑定


联系
我们