AngularJs练习Demo1
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("firstController", function ($scope, $timeout) {
setTimeout(function () {
// $scope.name = "111";//这样写两秒后不会改变name的值
$scope.$apply(function () { //使用一些外部的方法（如js，jquery）使model发生变化我们就需要使用到$apply:用法就是把要执行的外部方法放在$apply()里面
$scope.name = "111";
});
}, 2000);
$scope.name = "张三";
$scope.age = 10;
$scope.show = function () {
$scope.name = "点击我了";
}
$timeout(function () {
$scope.age = "50";
}, 2000);
});
app.controller("secondController", function ($scope) {
$scope.iphone = {
money: 15,
num: 1,
fre: 10
};
$scope.sum = function () {
return $scope.iphone.money * $scope.iphone.num;
};
$scope.$watch($scope.sum, function (newValue, oldValue) { //监视$scope.sum的变化
$scope.iphone.fre = newValue >= 100 ? 0 : 10;
});
});
</script>
</head>
<body>
<h1>
$apply 传播model的变化
</h1>
<h1>
$watch 监听model的变化
</h1>
<div ng-app="myApp">
<div ng-controller="firstController" ng-click="show()">
{{name}}<br />
{{age}}
</div>
<div ng-controller="secondController">
<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>
</body>
</html>
AngularJs练习Demo1的更多相关文章
- angularjs 指令—— 绑定策略（@、=、&）
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- 前端 初识angularJS的基本概念
DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1 今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJS 讲解五, Factory ,Service , Provider
一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...
- AngularJS的简单入门
AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- AngularJS+ThinkPHP实例教程
总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...
- 初识angularJS的基本概念
今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...
- AngularJS源码解析1：angular自启动过程
angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
随机推荐
- java优势
跨平台,只要有JVM(Java虚拟机)的操作系统就可以运行JAVA程序: 安全: 弃用危险的指针: 自动内在管理机制,垃圾回收机制,由垃圾回收器回收,减轻程序负担,也避免了手动回收的危险性: 完全面向 ...
- JS nodeType返回类型（复制的
http://blog.csdn.net/qyf_5445/article/details/9232907 将HTML DOM中几个容易常用的属性做下记录: nodeName.nodeValue 以及 ...
- hdu2896
数据水,但是各种wa各种t各种re最后照着别人的改了改发现了毛病 数组做指针传入的时候系统是不知道传入后的数字的长度的如果用memset他就只会讲指针的地方清零 #include<iostrea ...
- poj3685 二分套二分
F - 二分二分 Crawling in process... Crawling failed Time Limit:6000MS Memory Limit:65536KB 64bit ...
- Win7下VS2010使用STLPort 和boost1.56.
STLport的下载地址 http://sourceforge.net/projects/stlport/ 下载后,解压出文件.我的目录是 D:\STLport-5.2.1 . 右键计算机,属性,高级 ...
- Linux下MySQL的彻底卸载和安装配置字符集
前言: Linux环境下MySQL的安装和配置在网上已经有很多教程了.之所以写这篇文章是因为在配置字符集的时候找了网上的一些教程发现并不能用导致折腾了一阵子.下面的教程均是亲自实践. MySQL的彻底 ...
- windows下安装phpcms html/ 文件夹不可写的一种错误以及解决方法
朋友安装phpcms时遇到奇葩问题,环境搭建在windows7中,竟然出现 html/ 和 phpsso_server/caches/文件夹不可写问题(如图) 在windows下出现这种权限的问题真不 ...
- ssm+jsp+自定义标签实现分页，可以通用（前端实现）
近期做了一些分页方面的开发,大致梳理一下 1 jsp页面上关于分页的代码 <tr> <td colspan="9"> <ule1:pagination ...
- Ubuntu12.04下载Android4.0.1源码全过程，附若干问题解决[转]
学校里一直在做应用层开发,考虑到日后就业问题,这次决定研究源码和驱动,并进行编译.没想到就下载源码这一步折腾了我整整两天,期间遇到很多问题,哎,记录于此,希望日后再下源码的人不要再走无谓的弯路了.事实 ...
- STL 查找vector容器中的指定对象：find(）与find_if()算法
1 从vector容器中查找指定对象:find()算法 STL的通用算法find()和find_if()可以查找指定对象,参数1,即首iterator指着开始的位置,参数2,即次iterator指着停 ...