@{

    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. 初学Java ssh之Spring 第四篇

    今天我来学习学习Spring中Bean. 在Spring中原来还有<beans.../>标签啊,它相当于<bean.../>标签的老爸,老爸可以有很多个儿子,但是老爸只有一个哦 ...

  2. myeclipseb笔记（4）：拷贝文件的相应配置

    在MyEclipse中,经常需要用到拷贝工程文件,但是直接拷贝的话,就会出现访问不了的情况,如下: 原文件learn/StudManage/login.jsp,访问: 拷贝工程,改名,访问: 就出现了 ...

  3. CSS特殊性

    样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0, ...

  4. php 之 房屋租赁练习（0509）

    做出以下页面并实现其对应的功能: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. CFLAGS/CPPFLAGS/CXXFLAGS in Makefile介绍

    先来看一张关于Makefile中的常见预定义变量. CFLAGS 表示用于 C 编译器的选项,CXXFLAGS 表示用于 C++ 编译器的选项.这两个变量实际上涵盖了编译和汇编两个步骤.大多数程序和库 ...

  6. Android手机SSH Client客户端推荐JuiceSSH

    Windows上建立ssh服务器 参见: http://www.cnblogs.com/xred/archive/2012/04/21/2461627.html Android手机SSH Client ...

  7. 继网易博客后搜狐博客也增加了nofollow标签

    继网易博客后搜狐博客也增加了nofollow标签 今天在搜狐博客发表了篇文章,在末端添加上我的版权,结果回头查看是发现,这个锚文本被加上了nofollow标签,也就是说这样的外链已经没有传递权重的作用 ...

  8. IOS 通过button获取cell

    在使用tableview时,有时我们需要在cell中添加button和label,以便添加某项功能,而且往往点这个button的方法中需要知道button所在cell中label内存放的值. 一般而言 ...

  9. write a macro to judge big endian or little endian

    Big endian means the most significant byte stores first in memory. int a=0x01020304, if the cpu is b ...

  10. XJOI网上同步训练DAY6 T1

    思路:考试的时候直接想出来了,又有点担心复杂度,不过还是打了,居然是直接A掉,开心啊. 我们发现,Ai<=7,这一定是很重要的条件,我们考虑状态压缩,去枚举路径中出现了哪些数字,然后我们把原来n ...