@{

    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. QT VS2008未处理的异常: 0xC0000005

    症状如图所示 出错代码段在第3行 QString dir = QFileDialog::getExistingDirectory(this,    tr("Save file path&qu ...

  2. Sicily 1323. Switch text

    题目地址:1323. Switch text 思路: 题目意思不好理解呀. 题目意思是这样的:输入两个测试数据,首先,两个测试数据本身得各自前后倒转,然后两个测试数据倒转后的结果再各自对半互换,然后测 ...

  3. OpenSceneGraph FAQ

    转自http://www.cnblogs.com/indif/archive/2011/04/22/2024805.html 1.地球背面的一个点,计算它在屏幕上的坐标,能得到吗? 不是被挡住了吗? ...

  4. Selinux 禁用

    Selinux是对于强制访问控制的实现,在这种访问控制体系的限制下,进程只能访问那些在他的任务中所需要文件. 对于新手来说会影响我们的操作.一般情况下是不需要的,所以禁用他,如果需要的情况下,我们可以 ...

  5. 一步步学会使用SeaJS(转)

    原文出处:一步步学会使用SeaJS 2.0 本文分为以下8步,熟悉之后就能够熟练使用SeaJS,从此之后你的生活会变得更加轻松愉悦! 1.SeaJS是什么? 2.下载并检阅SeaJS 3.建立工程和各 ...

  6. Magento资源问题上CDN方案研究

    通过对Magento的了解,发现Magento的资源文件主要分布在media.js.skin三个文件夹里,media文件夹主要包括了系统自带编辑器WYSIWYG Editor 所有编辑器涉及到的资源( ...

  7. 什么叫CallBack函数，怎么用回调函数？

    JQuery众多常用方法中很经常会用到回调函数, 理解好js callback函数定义及用法,我们就可以利用callback函数帮我们做很多事情啦! A callback is a function ...

  8. TextField控件详解2

    //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...

  9. performance

    简介 延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径.从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心) ...

  10. Codeforces 543D Road Improvement

    http://codeforces.com/contest/543/problem/D 题意: 给定n个点的树 问: 一开始全是黑边,对于以i为根时,把树边白染色,使得任意点走到根的路径上不超过一条黑 ...