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++ 编辑刚 ...
随机推荐
- DG下手工处理v$archive_gap方法
从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...
- Oracle ACL (Access Control List)详解
在Oracle11g中,Oracle在安全方面有了很多的改进,而在网络权限控制方面,也有一个新的概念提出来,叫做ACL(Access Control List), 这是一种细粒度的权限控制.在ACL之 ...
- 自定义函数标签（JSTL）
创建自定义函数标签步骤: 1.创建类,并且方法只能是静态 public static void operation(calculator cal) 2.书写tld <taglib xmlns=& ...
- c笔试题（1）
1.sizeof和strlen的区别 #include<stdio.h> #include<string.h> int main() { char a[10] = " ...
- Css3小技术
圆角border-radius border-radius:length *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法 ...
- Javascript 判断浏览器是否为IE的最短方法
作者:idd.chiang 发布时间:April 29, 2010 分类:Javascript/AS 在网上有幸看到夷人通过IE与非IE浏览器对垂直制表符支持特性搞出的一段简短的条件: var ie ...
- MYSQL错误解决：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ( ...
- PSAM读卡芯片TDA8007BHL开发
WWT:Work Waiting Time ATR:Answer To Reset,复位应答 etu =F/Df 1. PSAM概述和应用 PSAM(PurchaseSecure Access ...
- 【数位DP】 HDU 4734 F(x)
原题直通车:HDU 4734 F(x) 题意:F(x) = An * 2n-1 + An-1 * 2n-2 + ... + A2 * 2 + A1 * 1, 求0.....B中F[x]<=F[A ...
- 开机启动tomcat
windows: 成功之后在dos窗口键入 service.bat install Tomcat 输完然后按Enter键,出现如下窗口,便成功了. 进入windows服务管理,设成是自动的. #chk ...