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介绍] ...
随机推荐
- Socket server
Socket server的使用方法(精华部分),仅供自用. class MyServer(socketserver.BaseRequestHandler): def handle(self): wh ...
- 一款APP的开发设计是如何从0到1一步一步设计的
目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和ios 9的系统之上,而现在最新的是iphone 7和iOS 10了(更新换代真的很快),我这里说的是最新的iOS 界面设计规 ...
- MemCached总结二：数据管理指令
管理memcached中的数据包括添加(add).修改(set).删除(delete)及获取(get)等操作. 命令格式: 1.set set userId 0 0 5 12345 STORED ge ...
- vue-cli 结构
. |-- build // 项目构建(webpack)相关代码 | |-- build.js // ...
- Qt5.2 for Android 配置及部署到手机运行
使用DNK编程也没有那么难,使用QT为安卓跨平台编程需要安装NDK,SDK通过NDK调用C++程序,偶尔能提高一些效率. SDK下载地址:http://developer.android.com/sd ...
- 图像的全局特征--LBP特征
原文链接:http://blog.csdn.net/zouxy09/article/details/7929531#comments 这个特征或许对三维图像特征提取有很大作用.文章有修改,如有疑问,请 ...
- 原生sql的各种问题
1.nutz有方法自动根据数据库建models吗?2.select * from a a没有建相应的models怎么取结果?3.可以直接操作result,而不是在callback里面设置吗? wend ...
- 如何安全使用公共Wifi，防止信息泄露？
购物中心,机场,餐厅,咖啡馆,图书馆,公共交通,酒店客房均提供免费无线网络连接,这些网络每天被数百万人使用.然而,大多数人没有意识到的是,免费的公共Wi-Fi并不安全.即使需要密码才能登录,这并不一定 ...
- PySimpleGUI 的第一个桌面软件
最近学习了python风格的GUI模块,寻思着既然学了,就要学以致用,花了点时间,写了下面这个 简历软件.后面,可以通过接口 获取提交的数据,传到数据库里与网页交互.此软件我已经打包成 exe软件,直 ...
- MVC架构之delegate
Qt的MVC架构可以实现很多数据显示的功能,本次主要对代理进行一个总结: 重实现QStyledItemDelegate类,实现自定义类. (1)ComboxDelegate.h #ifndef COM ...