@{

    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. 解决CentOS 5.8在虚拟机环境下如何桥接上网

    1.虚拟机的网卡配置如下图所示: 2.在CentOS 5.8的命令行界面:输入如下指令 然后准备修改里面的网关地址和自己的IP地址 3.同时查看自己的IP地址和网关 4.在第二步里面修改,网关地址应该 ...

  2. 三级联动数据表db_nove.sql

    -- phpMyAdmin SQL Dump -- version 2.11.2 -- http://www.phpmyadmin.net -- -- 主机: localhost -- 生成日期: 2 ...

  3. POJ3253 Haffman

    POJ3253 分析: 简单的哈弗曼树的应用. AC代码: //Memory: 316K Time: 16MS #include <iostream> #include <cstri ...

  4. jquery 点点滴滴小记

    字符截取显示 var text = $(".content").text(); var textNum = text.length; var textInt = text.slic ...

  5. destoon实现调用热门关键字的方法

    本文所述的destoon调用热门关键字的方法是根据数据库里面的保存的搜索的关键字来显示的.每个模块下面都有各自的关键字下面是调用的标签: ? 1 <!--{tag("moduleid= ...

  6. 二叉树的Morris遍历

    二叉树的遍历,除了上篇文章中的传统递归和使用的栈结构的非递归方式,还有如下这种Morris遍历方式,该算法的构思非常巧妙:利用前驱空闲的rightChild指针指向当前节点,形成一个环.时间复杂度和前 ...

  7. WCF-NAT模式访问

    由于项目需求,第一次用wcf做基于internet的访问.整理一下自己的探索,作为总结,也供自己以后回顾. 要求:(1)wcf服务需要部署在internet之中. (2)双工通信. 出现问题: 根据上 ...

  8. HTTP发送请求模拟

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.I ...

  9. SSH转发机制

    第一部分 概述 当你在咖啡馆享受免费 WiFi 的时候,有没有想到可能有人正在窃取你的密码及隐私信息?当你发现实验室的防火墙阻止了你的网络应用端口,是不是有苦难言?来看看 SSH 的端口转发功能能给我 ...

  10. 教程：30分钟学会Adobe Premiere

    原文地址:http://tieba.baidu.com/p/2785313831 视频教程地址