@{

    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. MRC和ARC混编

    iOS5.0以后就开始可以使用ARC( Automatic Reference Counting:自动引用计数)来代替之前的MRC(Manual Reference Counting:人工引用计数). ...

  2. IOS添加自定义字体库

    1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...

  3. C++ 知识点 2

    基本类型常量 const int a; int const a; const int *a; int * const a; int const * a const; 之间的区别? const int ...

  4. 移动端-jquery Ajax执行滑动到底部进行加载 指定加载次数

    过完年了,又要有新的项目了,趁暴风雨前的宁静,就把之前让我挺头疼的ajax加载给总结了一下.在此分享. 声明下:笔者对于ajax也是新手,如有更好的写法或可以优化的写法,还望指正! 项目需求: 移动端 ...

  5. 解决jQuery中美元符号（$）命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  6. 16--Box2D使用（二、显示物理世界）

    在上一篇文章中我们创建了的一个物理世界,当物理世界中的刚体一个也没有显示出来.为显示物理世界中的物体,我们需要引入GLES-Render(调试Box2D使用).这两个文件可以再 %Cocos_Home ...

  7. 详细解析 RxAndroid 的使用方式

    RxAndroid是RxJava的扩展, 优雅地处理异步请求. RxAndroid配合Lambda表达式, 精简处理回调, 使程序更具有可读性. Rx作为Android最优秀的开源库之一, 极大地提高 ...

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

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

  9. ecshop代码详解之init.php

    在includes/init.php目录下 因为工作原因,需要对ecshop二次开发,顺便记录一下对ecshop源代码的一些分析: 首先是init.php文件,这个文件在ecshop每个页面都会 调用 ...

  10. Kafka笔记--参数说明及Demo

    参考资料:http://blog.csdn.net/honglei915/article/details/37563647参数说明:http://ju.outofmemory.cn/entry/119 ...