<!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. .NET前后台-JS获取/设置iframe内对象元素并进行数据处理

    转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...

  2. Java基础之多线程简述

    首先,要辨析进程与线程的概念: 进程是程序执行的过程,它持有资源和线程,相对于程序本身而言具有动态性. 线程是系统中最小的执行单元,同一个进程中可能有多个线程,它们共享该进程持有的资源.线程的通信也称 ...

  3. html中<frameset>标签，框架结构各窗口的父级菜单子级菜单关系

    这个问题搞得我头大,并且在查过百度后各位大佬给出的解释我都不能理解,应该是我太白的原因,希望我写的能好理解. 下面文章窗口1.2.3,在代码里分别为chuangkou.chuangkou1.chuan ...

  4. 体验：Anko + Kotlin

    ● 依赖:compile 'org.jetbrains.anko:anko:0.10.0' ● 界面: import android.view.View import org.jetbrains.an ...

  5. 搭建 Lepus 天兔 监控MySQL

    Part1: Lepus安装需要Lamp环境,lepus官网手册也建议采用XAMPP的方式安装,lepus也是在XAMPP上进行研发的 注意xampp会把apache,mysql,php都安装,所以要 ...

  6. 前端手机验证码cookie存储

    注册的时候经常会有手机验证码的输入这个环节,在第一次点击发送了验证码只后,比如倒计时只走了10秒钟,然后刷新的话,倒计时要还是存在的,这个时候就要有一个cookie的存在了. html的代码 < ...

  7. javaScript 计算两个日期的天数相差

    一:计算两个日期相差的天数 1 <html> <head> <meta http-equiv="Content-Type" content=" ...

  8. Django 了解

    Django是一个开放源代码的Web应用框架 Django也是一个基于 MVC 构造的框架. 但是在Django中,控制器接受用户输入的部分由框架自行处理,所以 Django 里更关注的是模型(Mod ...

  9. Eclipse 中的 Bulid Path

    什么是Build Path? Build Path是指定Java工程所包含的资源属性集合. 在一个成熟的Java工程中,不仅仅有自己编写的源代码,还需要引用系统运行库(JRE).第三方的功能扩展库.工 ...

  10. Day 08 字符编码

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