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介绍] ...
随机推荐
- Core篇——初探IdentityServer4(OpenID Connect模式)
Core篇——初探IdentityServer4(OpenID Connect客户端验证) 目录 1.Oauth2协议授权码模式介绍2.IdentityServer4的OpenID Connect客户 ...
- hdu2236 无题II 最大匹配 + 二分搜索
中文题目,题意大家都明白. 看到“不同的行和列”就觉得要用二分匹配来做.要求最大值与最小值的差值最小,是通过枚举边的下限和上限来完成. 枚举过程是这样的,在输入的过程可以记录下边权的最大值MAX和最小 ...
- powershell遍历文件夹设置权限，解决文件无法删除的问题。
function set-rights ($path) { $p = Get-Item $path; if ($p.Attributes -eq 'Directory') { foreach ($ch ...
- Vs2010无法打开文件“Kernel32.lib”、无法打开“libcpmt.lib”"msvcprt.lib"
1.对于无法打开"Kernel"问题,即使复制lib文件到目录,仍然会出现最后的错误; 原因:WindowsSdk 安装失败! 方法:重装 microsoft SDK6.0 ,再在 ...
- Warning:关于_CRT_SECURE_NO_WARNINGS
Warning 1 warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s in ...
- 基于libVLC的视频播放器
本文来自于:http://blog.csdn.net/leixiaohua1020/article/details/42363079 最简单的基于libVLC的例子:最简单的基于libVLC的视频播放 ...
- bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
- hust 1570 Lazy. Lazy. Laaaaaaaaaaaazy!
链接 1570 - Lazy. Lazy. Laaaaaaaaaaaazy! 题意 给出三种按键,caplock,shift,nomal(像正常键盘操作一样) ,输入三串字符串,s1,s2,txt, ...
- 《Exception》第八次团队作业：Alpha冲刺
一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...
- Orcale-利用闪回恢复数据方法
一.delete误删 方法1:如果表结构没有改变,直接闪回整个表,具体步骤: --首先需要表闪回权限,开启行移动功能 alter table 表名 enable row movement; --执行闪 ...