angular的双向数据绑定
方向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的双向数据绑定的更多相关文章
- Angular解决双向数据绑定
<!DOCTYPE html> <html ng-app="myApp1"><body><div ng-controller=" ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- 双向数据绑定(angular,vue)
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- Angular双向数据绑定MVVM以及基本模式分析
MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...
- Angular自定义组件实现数据双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- 第217天:深入理解Angular双向数据绑定的原理
一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...
随机推荐
- 动态SQL语句之sp_executesql的使用
sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如: exec sp_executesql @sql, N'@item_name nvarchar(10 ...
- linux io stack
- [Android Tips] 20. Android Studio Tips
[译]Android Studio 使用技巧系列(一)-快捷键 [译]Android Studio 使用技巧系列(二)-快捷键 [译]Android Studio 使用技巧系列(三)-调试 [译]An ...
- 关于Java中基本类型的长度相关基础知识
1. 用HeapByteBuffer放int占几个byte? 占4个.而且不论你是放1还是-1还是0xffff. 因为int的长度是4个byte,HeapByteBuffer的存储又是byte数组. ...
- ebs r12 -- adadmin: error while loading shared libraries: libclntsh.so.10.1
安装EBS R12.2增加中文字符集时,运行$AU_TOP/bin/adadmin出错: $ adadmin adadmin: error while loading shared libraries ...
- 搜索引擎Solr系列(二): Solr6.2.1 从MySql中导入数据
一:建立MySql测试表,如下图: 二:solr导入配置: 1.新建demo core文件夹,并修改managed-schema里面的配置文件建立索引字段: 2.把mysql-connector-j ...
- HDU 4504 威威猫系列故事——篮球梦(dp)
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 中文都看得懂.不过我是看hint才正确理解什么意思的.开始的时候理解错了. 解题思路: 给定时 ...
- [原创]java WEB学习笔记103:Spring学习---Spring Bean配置:基于注解的方式(基于注解配置bean,基于注解来装配bean的属性)
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- Apache2.4开启GZIP功能
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...
- Kernel Time和User Time分别指什么
比如你的一个程序读取并分析一个文件,读取时会调用系统接口,系统会调用驱动来从物理设备上读取数据这个就是kernel time,除此以外在你自己进程上下文中执行代码占用的时间就是user time了. ...