<!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. Npgsql使用入门(一)【搭建环境】

    首先去官网下载最新数据库安装包 postgresql-9.6.1-1-windows-x64 将postgreSQL9.6注册为windows服务 注意:大小写要正确 D:\Worksoftware\ ...

  2. The name ‘InitialzeComponent’ does not exist in the current context

    在Visual Studio中创建Windows Store项目,在MainPage.xaml.cs中出现错误: The name 'InitialzeComponent' does not exis ...

  3. 第5章分布式系统模式 使用服务器激活对象通过 .NET Remoting 实现 Broker

    正在使用 Microsoft? .NET Framework 构建一个需要使用分布式对象的应用程序.您的要求包括能够按值或按引用来传递对象,无论这些对象驻留在同一台计算机上,还是驻留在同一个局域网 ( ...

  4. Walking on the path of Redis --- Introduction and Installation

    废话开篇 以前从来没听说过有Redis这么个玩意,无意间看到一位仁兄的博客,才对其有所了解,所以决定对其深入了解下.有不对的地方还请各位指正. Redis介绍 下面是官方的介绍,不喜欢english的 ...

  5. 解决启动httpd报: apr_sockaddr_info_get() failed for错误

    我测试库里 service httpd start 时报 下面错误 httpd: apr_sockaddr_info_get() failed for fengxin.wzjzt.centoshttp ...

  6. Java中数组获取最大值

    最大值获取:从数组的所有元素中找出最大值. 实现思路: 定义变量,保存数组0索引上的元素 遍历数组,获取出数组中的每个元素 将遍历到的元素和保存数组0索引上值的变量进行比较 如果数组元素的值大于了变量 ...

  7. HILLSTONE sg6000 g5150 怎么恢复出厂设置

    hillstone恢复出厂设置的方法(忘记密码的情况) 口令丢失情况下的处理 如果口令丢失,用户无法登录安全路由器进行配置,请在安全路由器刚启动时按住 CLR 按键大约 5 秒,使设备恢复到出厂配置. ...

  8. POJ3984-迷宫问题【BFS】

    定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, ...

  9. NOI 2016 循环之美 (莫比乌斯反演+杜教筛)

    题目大意:略 洛谷传送门 鉴于洛谷最近总崩,附上良心LOJ链接 任何形容词也不够赞美这一道神题 $\sum\limits_{i=1}^{N}\sum\limits_{j=1}^{M}[gcd(i,j) ...

  10. 域名系统（DNS）

    DNS (domain name server/system) 1．基本信息 网络中数据通信依赖ip地址 测试:手动将dns服务地址改为空值,通过ip和域名分别测试网络的联通性 FQDN 完全域名(完 ...