方向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(){...});

 <!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">

 <!--将多选框的勾选数据给model -->

 复选框：<input type="checkbox" ng-model="isAgree"/>

 <br>

 <!--将选择框的model数据给ng-model-->

 <!--ng-options 动态生成选项  -->

 <select ng-model="sel2" ng-options="sel2.name for sel2 in selection"></select>

 <p>{{sel2.name}}</p>

 <script>

     var app=angular.module('myApp',['ng']);

     app.controller('myCtro',function($scope){

         //$watch可以监听view数据是否改变，便于观察现象

         $scope.$watch('isAgree',function(){

             console.log($scope.isAgree);

         });

         $scope.$watch('sel',function(){

             console.log($scope.sel);

         });

         $scope.selection=[

             {name:'model',value:5},

             {name:'modren',value:4},

             {name:'moon',value:1},

             {name:'morning',value:3}

         ];

         //为select标签设置一个selected    选项

         $scope.sel2=$scope.selection[1];

         $scope.$watch('sel2',function() {

             console.log($scope.sel2.value);

         })

     })

 </script>

 </body>

 </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的双向数据绑定的更多相关文章

  1. Angular解决双向数据绑定

    <!DOCTYPE html> <html ng-app="myApp1"><body><div ng-controller=" ...

  2. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  3. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  4. 双向数据绑定（angular,vue）

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  5. Angular双向数据绑定MVVM以及基本模式分析

    MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...

  6. Angular自定义组件实现数据双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  7. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  8. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  9. 第217天：深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

随机推荐

  1. CXF WebService整合SpringMVC的maven项目

    首先推荐博客:http://www.cnblogs.com/xdp-gacl/p/4259481.html   http://blog.csdn.net/hu_shengyang/article/de ...

  2. u-boot FIT image介绍_转自“蜗窝科技”

    转自:http://www.wowotech.net/u-boot/fit_image_overview.html 1. 前言 Linux kernel在ARM架构中引入设备树device tree( ...

  3. visio取消自动粘附

    有时候画直线的时候需要直线摆在任意位置,这个时候自动粘附就很碍事了,总是自动把你的直线给摆到粘附的特殊位置上 如何取消: 视图->视觉帮助(点右下角的小箭头)->当前活动的->取消勾 ...

  4. js统计，然后去重例子

    var list=new Array(); for(var i=0;i<result.length;i++){ examsubject=result[i].examsubject; list.a ...

  5. delphi 判断一个数组的长度用 Length 还是 SizeOf ?

    判断一个数组的长度用 Length 还是 SizeOf ?最近发现一些代码, 甚至有一些专家代码, 在遍历数组时所用的数组长度竟然是 SizeOf(arr); 这不合适! 如果是一维数组.且元素大小是 ...

  6. python知识点总结

    此知识要点,是根据学习廖雪峰phthon3.0教程总结的,所以结构基本和这个教程的结构相同. 背景知识 python是什么?(1)python是一门编程语言,意味着可以用python编写程序,完成一定 ...

  7. Leetcode: Rearrange String k Distance Apart

    Given a non-empty string str and an integer k, rearrange the string such that the same characters ar ...

  8. 总结ThinkPHP使用技巧经验分享(三)

    add方法返回主键(id)的值在往数据表中添加数据时调用add方法,默认返回值就是刚添加的id值,就不用再去查询了. save方法返回值的判断在修改数据时,如果修改成功返回的是被修改的记录数0,1,2 ...

  9. 命令行下Git的使用

    命令行下Git的使用 写在前边的话 以自己即将进行的毕设项目为例,进行Git使用的简易说明.不过由于校园网络的限制,故使用GitOSC. 快速开始 本次git使用位于自己的个人PC上,所以将个人的Gi ...

  10. Activityn 生命周期

    前言 Activity 生命周期,虽然开发android 程序有几年了,但是很多基本东西还是经常遗忘模糊,在此笔记白纸黑字记录,下次记忆模糊的时候温故知新.网上一搜索一大把,但是多是一大堆各种日志搅来 ...