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++ 编辑刚 ...
随机推荐
- iOS 数据持久化
一.plist文件存储 获得文件 NSString *path = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDom ...
- 第1章 网络编程基础(3)——基本Socket通信
服务器常用模型
- FANTASY：In which way do you think the world will end?
In which way do you think the world will end? The moment you are reading my essay, you are somehow c ...
- eclipse项目显示标尺
Windows-Preferences-General-Editors-Text Editors-Show line numbers
- ECSTORE 新建APP应用
1.用命令新建app // ----- window平台 ----- 直接运行 " 站点根目录/app/base/cmd.bat " 出现命令行后输入 dev:new app my ...
- HTML&CSS基础学习笔记1.6-html的文本操作标签
文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识. 1. <em>,<i>内的文字呈现为倾斜效果: 2. <strong>,< ...
- 【好程序员笔记分享】——UIView与CALayer详解
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ UIView与CALayer详解 研究Core Animation已经有段时间了,关于Core Animati ...
- CM源码同步编译教程
一.操作系统 准备一个ubuntu安装镜像,我用的是12.10. 安装系统时请安装到30g以上的盘,最好就50g以上啦 安装教程不多说,网上很多教程,这里我推荐用自带的wubi工具安装,比较方便 用虚 ...
- SqlServer2008 新功能：简单数据加密
一.首先要把密码字段改成 varbinary 类型. CREATE TABLE [dbo].[UserInfo]( [id] [int] IDENTITY(1,1) NOT NULL, [name] ...
- Codeforces 204A Little Elephant and Interval
http://codeforces.com/problemset/problem/204/A 题意:给定一个[L,R]区间,求这个区间里面首位和末尾相同的数字有多少个 思路:考虑这个问题满足区间加减, ...