<!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. Android应用优化之代码检测优化

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  2. 7.Performance Statistics（性能统计）

    利用性能分析器中统计的数据,来分析和发现,其中的性能瓶颈点. 1.设置Statistic Options View>Live Options中的Statistic Options设置可以设置需要 ...

  3. P3805 【模版】manacher算法

    题目描述 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 字符串长度为n 输入输出格式 输入格式: 一行小写英文字符a,b,c...y,z组成的字符串S 输出格 ...

  4. [原创]C++中一些重要概念

    1.虚函数 虚函数的作用是允许在派生类中重新定义与基类同名的函数,并且可以通过基类指针或引用来访问基类和派生类中的同名函数.当把基类的某个成员函数声明为虚函数后,允许在其派生类中对该函数重新定义,赋予 ...

  5. QT4.8界面设计（MSVC2010X）

    1.C++ IDE设计 MFC这种半死不活的windows C++平台已经被抛弃,很无奈.转向Qt的C++还是不错的选择. QT的QML才是最新的亮点,可惜没有时间经历这些东西了. 2.程序代码 2. ...

  6. 基于SLIC分割的特征点检测

    一:pipeLIne (1):基于模型的pose估计综述: 对于一个3D模型,可以投影到平面,得到不同的位姿,而pose识别是利用所见的2.5D图像,来估计模型,并同时识别出位姿. 3D模型投影时注意 ...

  7. 使用meta实现页面的定时刷新或跳转

    <meta http-equiv="refresh" content="5"> 这个表示当前页面每5秒钟刷一下,刷一下~ <meta http ...

  8. 后代children() find()的区别

    $(document).ready(function(){ $("div").children(); });只拿到div下面的子标签元素 $(document).ready(fun ...

  9. 执行opatch apply 报错 OPatch failed with error code 73

    .执行opatch apply 报错 OPatch failed [oracle@ora_11g 14275605]$ /opt/oracle/product/db_1/OPatch/opatch a ...

  10. Day 08 字符编码

    字符编码 计算机基础 启动应用程序 1.双击QQ 2.操作系统接受指定然后把该操作转化为0和1发送给CPU 3.CPU接受指令然后把指令发给内存 4.内存接受指令把指令发送给硬盘获取数据 5.QQ在内 ...