angularjs1-3,$apply,$watch
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController" ng-click="show()">
{{name}}
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
//$apply传播Model的变化，Angularjs外部的控制器（Dom事件，外部回调函数）必须调用$apply，需要命令angulrjs刷新自己，applay方法就是做这个事的，把要执行的函数交给$apply去执行。
app.controller('firstController',function($scope,$timeout){
$scope.name = 'hello';
setTimeout(function(){
//$scope.name = 'hi'; 没有反映
$scope.$apply(function(){
$scope.name = 'hi';
});
},2000);
//内置timeout
/*$timeout(function(){
$scope.name = 'hi';
},2000);*/
$scope.show = function(){
alert('adssdg');
$scope.name = 'hi点击事件发生了';
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CartController">
<p>价格:<input type="text" ng-model="iphone.money"></p>
<p>个数:<input type="text" ng-model="iphone.num"></p>
<p>费用:<span>{{ sum() | currency:'￥' }}</span></p>
<p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>
<p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller('CartController',function($scope){
$scope.iphone = {
money : 5,
num : 1,
fre : 10
};
$scope.sum = function(){
return $scope.iphone.money * $scope.iphone.num;
};
$scope.$watch('iphone.money',function(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},true);
$scope.$watch($scope.sum,function(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
$scope.iphone.fre = newVal >= 100 ? 0 : 10;
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"> <div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart() | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{subtotal() | currency}}</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller('CartController',function($scope){
$scope.bill = {};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.totalCart = function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
}
$scope.subtotal = function() {
return $scope.totalCart() - $scope.discount;
};
function calculateDiscount(newValue, oldValue, scope) {
$scope.bill.discount = newValue > 100 ? 10 : 0;
}
$scope.$watch($scope.totalCart, calculateDiscount);
}); </script> </body>
</html>
angularjs1-3,$apply,$watch的更多相关文章
- Angularjs1培训
Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...
- Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...
- Oracle 11g dataguard check RTA(real time apply)
Oracle 11g dataguard check RTA(real time apply) 2017年8月24日 16:38 环境:oracle 11.2.0.1 OEL 5.8 注:以下操作都在 ...
- Oracle 11g dataguard check real time apply
2017年8月24日 16:38 环境:oracle 11.2.0.1 OEL-5.8 注:以下操作都在备库执行 总结方法: 1.FPYJ(125_7)@fpyj123> select open ...
- this new call() apply()
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...
- angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把 ...
- 关于vue，angularjs1,react之间的对比
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...
- Angular系列-AngularJs1使用Ace编辑器
Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
随机推荐
- LeetCode.888-公平的糖果交换(Fair Candy Swap)
这是悦乐书的第339次更新,第363篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第208题(顺位题号是888).Alice和Bob有不同大小的糖果棒:A[i]是Alic ...
- netcore发布到centos 验证码Zkweb.system.drawing不显示及乱码的问题
netcore发布到centos 使用的是Zkweb.system.drawing生成验证码,发布后可能会出现不显示及乱码的情况 1.验证码图片不显示(通过日志会发现生成图片时代码已经异常) Zkwe ...
- WPF黑色背景下常用控件样式
平时工作用 自己整理的 代码等找到合适的上传空间在进行同步
- sublime3 install python3
链接地址:https://blog.csdn.net/Ti__iT/article/details/78830040
- hdu 2485 Destroying the bus stations 最小费用最大流
题意: 最少需要几个点才能使得有向图中1->n的距离大于k. 分析: 删除某一点的以后,与它相连的所有边都不存在了,相当于点的容量为1.但是在网络流中我们只能直接限制边的容量.所以需要拆点来完成 ...
- 在APP开发设计过程中：如何设计启动页面？
心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒.所以初次见面所展示的形象真的很重要.同理,用户在使用APP时,每 ...
- Segment公司--整合数据进行分析
YC毕业生Segment获得1500万美元A轮融资 现在收集数据是每一个公司的必修课了,而且是从各种不同 API 上收集数据,但是你还要把这些数据整合起来才能发挥作用,Segment就能帮你整合各个平 ...
- VTK+MFC 系列教程 非常强大
虽然QT才是王道!MFC的懂一些也是好的. 原文链接:http://blog.csdn.net/www_doling_net/article/details/8939115 之前介绍了基于VTK的单文 ...
- Computer Vision的尴尬
原文: Computer Vision是AI的一个非常活跃的领域,每年大会小会不断,发表的文章数以千计(单是CVPR每年就录取300多,各种二流会议每年的文章更可谓不计其数),新模型新算法新应用层出不 ...
- window环境下，提升工作效率
效率工具 windows桌面程序 Listary 本地文件搜索器 有道词典 划词翻译, 并且能够存在生词本里面 印象笔记 浏览资料整理 chrom插件 crxMouse 鼠标手势 chrome vim ...