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++ 编辑刚 ...
随机推荐
- poj1850
是因为我好久不刷题了吗,这个题竟然做了俩小时,好几个思路都被推翻 用dp数组预处理出范围是a->a+x字符y长度有多少种递增串 然后例如def首先求a__有多少种情况那么自然后面就是只有b即dp ...
- 单源最短路径 hdu 2066
#include<string.h> //和prim类似#include<stdio.h> //prim所考虑的是节点与当前所建成的树的距离最小using namespace ...
- Java中int和String互相转换的多种方法
1 如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([ ...
- SVG基础
可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准.SVG 是使用 ...
- vmware安装Linux时无法打开xpdf
vmware10+redhat9 在装第二张镜像文件时,出现如下提示:无法打开xpdf-2.01-8软件包...... 解决方法: vmware中,虚拟机->设置->硬件->CD/D ...
- 另一种root方法，Android boot.img破解
一.破解原理 Android手机获得Root权限,其实就是让/system和/data分区获得读写的权限.这两个分区的权限配置,一般在根分区的init.rc文件中,修改这个文件可永久获得root权限. ...
- cf B. The Fibonacci Segment
http://codeforces.com/contest/365/problem/B #include <cstdio> #include <cstring> #includ ...
- 自制单片机之六……串行I2C总线E2PROM AT24CXXX的应用
这一篇介绍I2C存储器的使用.主要是介绍AT24CXX系列器件,它分为两类,主要是通过被存储容量地址来分的,一类是AT24C02-AT24C16,它的存储容量从256字节到2048字节.另一类是AT2 ...
- 【Xamarin 在Mac OS 上的部署安装环境】
******************没用Mac 的机子,也只能靠虚拟机了**********1 安装VMware 10 从网上下载即可2 下载MAC OS 10.9.5的安装镜像,网上有很多,最好使用 ...
- poj1284：欧拉函数+原根
何为原根?由费马小定理可知 如果a于p互质 则有a^(p-1)≡1(mod p)对于任意的a是不是一定要到p-1次幂才会出现上述情况呢?显然不是,当第一次出现a^k≡1(mod p)时, 记为ep(a ...