@{

    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的更多相关文章

  1. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  2. 前端 初识angularJS的基本概念

    DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1   今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...

  3. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  4. AngularJS 讲解五, Factory ,Service , Provider

    一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...

  5. AngularJS的简单入门

    AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  6. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  7. 初识angularJS的基本概念

    今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...

  8. AngularJS源码解析1：angular自启动过程

    angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); ...

  9. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

随机推荐

  1. HibernateTemplate常用方法总结

    HibernateTemplate常用方法 (本文章内容相当于转载自:http://www.tuicool.com/articles/fU7FV3,只是整理了一下内容结构和修改了部分内容,方便阅读) ...

  2. MySQL学习笔记(3) - 查询服务器版本，当前时间，当前用户

    SELECT VERSION(); --显示当前服务器版本 SELECT NOW(); --显示当前日期时间 SELECT USER(); --显示当前用户 MySQL中语句规范: 1.关键字和函数名 ...

  3. php 之 注册审核(0523)

    当注册后,先将信息保存到session,通过审核后才会添加到数据库中, 审核通过后状态变为已通过,这时添加到数据库中的信息进行登录.若发现此用户的不良行为,可以撤销通过. 注册页面: <!DOC ...

  4. Hadoop-2.7.1集群环境搭建

    摘自:http://blog.csdn.net/u014039577/article/details/49813531 由于日志数据量越来越大,数据处理的逻辑越来越复杂,同时还涉及到大量日志需要批处理 ...

  5. BZOJ 2115: [Wc2011] Xor

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 2794  Solved: 1184 [Submit][Stat ...

  6. matlab图像处理

    matlab图像处理 转自:http://www.cnblogs.com/lovebay/p/5094146.html 1. 图像和图像数据 缺省情况下,MATLAB将图像中的数据存储为双精度类型(d ...

  7. 用EF DataBase First做一个简单的MVC3报名页面

    使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO. ...

  8. Could not find *.apk!解决办法

    右键点击项目选择Properties,把Libraries下Android x.x给remove了. 点右侧的Add Library,选择JRE System Library然后next,重新指定JR ...

  9. 【VC编程技巧】文件☞2.3CArchive的用法

    CArchive 对象提供了一个类型安全缓冲机制CArchive 对象提供了一个类型安全缓冲机制.用于将可序列化对象写入CFile 对象或从中读取可序列化对象.通常,CFile 对象表示磁盘文件:但是 ...

  10. [置顶] 【原创分享】嵌入式linux应用之内核移植定制篇-前篇（linux-3.8.12 mini2440）--20130824

    移植的话其实很早就做过了,不过那时用的友善定制的老版本2.6.32 驱动什么的全部弄好了,仅仅用默认配置而已.基本不用改动什么,很简单. 内核更新其实非常的快,今天我就用个3.8.12来移植. 当然, ...