<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="../../angular.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController"  ng-click="show()">

              {{name}}

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          //$apply传播Model的变化，Angularjs外部的控制器（Dom事件，外部回调函数）必须调用$apply，需要命令angulrjs刷新自己，applay方法就是做这个事的，把要执行的函数交给$apply去执行。

          app.controller('firstController',function($scope,$timeout){

              $scope.name = 'hello';

              setTimeout(function(){

                  //$scope.name = 'hi';   没有反映

                  $scope.$apply(function(){

                      $scope.name = 'hi';

                  });

              },2000);

              //内置timeout

              /*$timeout(function(){

               $scope.name = 'hi';

               },2000);*/

              $scope.show = function(){

                  alert('adssdg');

                  $scope.name = 'hi点击事件发生了';

              };

          });

      </script>

    </body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script type="text/javascript" src="../angular.min.js"></script>

</head>

<body>

<div ng-app="myApp">

    <div ng-controller="CartController">

        <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>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller('CartController',function($scope){

        $scope.iphone = {

            money : 5,

            num : 1,

            fre : 10

        };

        $scope.sum = function(){

            return $scope.iphone.money * $scope.iphone.num;

        };

        $scope.$watch('iphone.money',function(newVal,oldVal){

         console.log(newVal);

         console.log(oldVal);

         },true);

        $scope.$watch($scope.sum,function(newVal,oldVal){

            console.log(newVal);

            console.log(oldVal);

            $scope.iphone.fre = newVal >= 100 ? 0 : 10;

        });

    });

</script>

</body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="../../angular.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="CartController">

              <div ng-repeat="item in items">

                  <span>{{item.title}}</span>

                  <input ng-model="item.quantity">

                  <span>{{item.price | currency}}</span>

                  <span>{{item.price * item.quantity | currency}}</span>

              </div>

              <div>Total: {{totalCart() | currency}}</div>

              <div>Discount: {{bill.discount | currency}}</div>

              <div>Subtotal: {{subtotal() | currency}}</div>

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          app.controller('CartController',function($scope){

                  $scope.bill = {};

                  $scope.items = [

                      {title: 'Paint pots', quantity: 8, price: 3.95},

                      {title: 'Polka dots', quantity: 17, price: 12.95},

                      {title: 'Pebbles', quantity: 5, price: 6.95}

                  ];

                  $scope.totalCart = function() {

                      var total = 0;

                      for (var i = 0, len = $scope.items.length; i < len; i++) {

                          total = total + $scope.items[i].price * $scope.items[i].quantity;

                      }

                      return total;

                  }

                  $scope.subtotal = function() {

                      return $scope.totalCart() - $scope.discount;

                  };

                  function calculateDiscount(newValue, oldValue, scope) {

                      $scope.bill.discount = newValue > 100 ? 10 : 0;

                  }

                  $scope.$watch($scope.totalCart, calculateDiscount);

          });

      </script>

    </body>

</html>

angularjs1-3,$apply,$watch的更多相关文章

  1. Angularjs1培训

    Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...

  2. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  3. Oracle 11g dataguard check RTA(real time apply)

    Oracle 11g dataguard check RTA(real time apply) 2017年8月24日 16:38 环境:oracle 11.2.0.1 OEL 5.8 注:以下操作都在 ...

  4. Oracle 11g dataguard check real time apply

    2017年8月24日 16:38 环境:oracle 11.2.0.1 OEL-5.8 注:以下操作都在备库执行 总结方法: 1.FPYJ(125_7)@fpyj123> select open ...

  5. this new call() apply()

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  6. angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

    笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新  可以在我的博客  查看我 已经封装好的 纯 js写的图片查看器插件    博客链接 懒得把 ...

  7. 关于vue，angularjs1,react之间的对比

    1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...

  8. Angular系列-AngularJs1使用Ace编辑器

    Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...

  9. AngularJS1.X版本基础

    AngularJS  知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factori ...

  10. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

随机推荐

  1. tinyxml使用

    1.下载地址 http://sourceforge.net/projects/tinyxml/ 2.tinyxml不仅支持Linux编译,同时也支持windows下编译,由于tinyxml仅有6个文件 ...

  2. 用 Swift 开发一个 TODO 应用

    背景 相信不少 iOS 程序员对于 Swift 依旧持以观望的态度,一来是这小家伙刚出来没几天,本身还处于完善的阶段:二来是学习的成本较高,看完官方文档怎么也要个几天的时间:三来是反正最近几年很难在工 ...

  3. BZOJ1060: [ZJOI2007]时态同步(树形dp 贪心)

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3285  Solved: 1286[Submit][Status][Discuss] Descript ...

  4. WordPress的wordfence插件的设置方法

  5. 00--Linux常用命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  6. 网络教程(7）OSI模型的低层模型

    OSI Model——Open System Interconnection Model 开放系统互联模型

  7. Project Euler 32 Pandigital products

    题意:找出所有形如 39 × 186 = 7254 这种,由 1 - 9,9个数字构成的等式的和,注意相同的积不计算两次 思路:如下面两种方法 方法一:暴力枚举间断点 /*************** ...

  8. BZOJ 3110 [ZJOI2013]K大数查询 (整体二分+线段树)

    和dynamic rankings这道题的思想一样 只不过是把树状数组换成线段树区间修改,求第$K$大的而不是第$K$小的 这道题还有负数,需要离散 #include <vector> # ...

  9. [BZOJ1999] 树网的核 [数据加强版] (树的直径)

    传送门 如果只是想验证算法正确性这里是洛谷数据未加强版 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenet ...

  10. Hibernate Session操作

    1.增加 @Test public void add(){ Configuration cfg=new Configuration().configure(); SessionFactory fact ...