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

 

最新文章

  1. docker develop django
  2. Java学习之多态
  3. ROS ZYNQ移植
  4. DB2系统管理试题标准答案
  5. error Infos
  6. 【转】VPN服务器配置详解
  7. 模块化开发AraeRegistration
  8. IOS开发-UI学习-sqlite数据库的操作
  9. git常见操作和常见错误
  10. Python学习日记day10------函数的命名空间、作用域与闭合函数
  11. MockHttpServletRequestBuilder中content和param的区别
  12. 【一天一道LeetCode】#80. Remove Duplicates from Sorted Array II
  13. css3修改浏览器scroll默认样式
  14. JDK动态代理深入理解分析并手写简易JDK动态代理(上)
  15. Java核心技术及面试指南 异常部分的面试题归纳以及答案
  16. Go条件语句、switch和循环语句
  17. asp.net webapi 返回json结果的方法
  18. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
  19. WOSA/XFS PTR Form解析库—FormRule.h
  20. racktables 的介绍及搭建指南

热门文章

  1. awk命令简介
  2. ping不通 www.baidu.com 163.com
  3. zabbix快速安装
  4. 唐巧的iOS技术博客选摘
  5. JSBinding + SharpKit / 原理篇:内存管理与垃圾回收
  6. bzoj4702: 装箱游戏
  7. 深入理解Java String#intern() 内存模型
  8. iOS自定义发送消息输入框
  9. sublime text3的一些小技巧记录(配gif图)
  10. windows下Apache配置SSL安全连接
  11. native2ascii 在 Mac终端的转码
  12. ZeroClipBoard 复制粘贴插件
  13. ASP.NET 导入excel 数据
  14. UITableView的子控件高度不确定处理
  15. 自研框架wap.js实践
  16. 微信客户端+微信公众平台+新浪云SAE+Arduino+WS100(控制LED)
  17. Cesium home键定位的位置
  18. gradle入门(1-1)gradle的概念和使用
  19. Saltstack_使用指南02_远程执行-验证
  20. PHP中递归的实现(附例子)