码迷,mamicode.com
首页 > 其他好文 > 详细

angular的双向数据绑定

时间:2016-11-30 22:42:08      阅读:678      评论:0      收藏:0      [点我收藏+]

标签:mil   动态   选项   family   auto   als   app   selectall   for   

方向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的双向数据绑定

标签:mil   动态   选项   family   auto   als   app   selectall   for   

原文地址:http://www.cnblogs.com/samdx/p/6119548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!