<!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. HDU2080 夹角有多大2

    2019-05-17 15:00:09 加油加油,fightting !!! 这道题不知道acos()函数,acos()返回的是弧度,转化成度数要 / PI * 180 也没有想到通过向量 但是想到了 ...

  2. 大数据学习之路------借助HDP SANDBOX开始学习

    一开始... 一开始知道大数据这个概念的时候,只是感觉很高大上,引起了我的兴趣.当时也不知道,这个东西是做什么的,有什么用,当然现在看来也是很模糊的样子,但是的确比一开始强了不少. 所以学习的过程可能 ...

  3. MFC：“Debug Assertion Failed！” ——自动生成的单文档程序项目编译运行就有错误

    今天照着孙鑫老师的VC++教程学习文件的操作,VS2010,单文档应用程序,项目文件命名为File,也就有了自动生成的CFileDoc.CFileView等类,一进去就编译运行(就是最初自动生成的项目 ...

  4. MVC中使用UpdateModel获取接口参数

    废话少说,直接上代码: 模型类定义: public class RequestModel { public string Name { get; set; } public float Age { g ...

  5. [hihocoder][Offer收割]编程练习赛48

    折线中点 #pragma comment(linker, "/STACK:102400000,102400000") #include<stdio.h> #includ ...

  6. [C]关于交换

    交换(c,c++): 1)temp交换(也适用于非数型) 定义一个新的变量,借助它完成交换. int a,b; a=10; b=15; int t; t=a; a=b; b=t; 2)位运算 位运算不 ...

  7. Dependency Injection in ASP.NET MVC

    原文引自http://www.dotnetcurry.com/ShowArticle.aspx?ID=786 1.传统三层结构,相邻两层之间交互: 2.如果使用EntityFramework则View ...

  8. PhotoZoom放大的图片效果怎么样？清不清晰？

    PhotoZoom是一款使用了革命性技术.效果最好的图像无损放大工具.它可以对图片进行放大而没有锯齿,不会失真,让您无与伦比完美放大图像质量. PhotoZoom Pro使用了S-Spline Max ...

  9. 如何在IE11中设置兼容模式？设置的具体方法

    IE11浏览器软件版本:简体中文正式版 For Win7网络工具立即查看 1.同样进入需要兼容性模式的网站,点击菜单栏位工具--F12开发者人员工具!如下图所示. 2.在开发者选项左下侧菜单栏位,点击 ...

  10. 功分器 power divider

    之前讲过有了解过耦合器,知道耦合器是矢网测量当中的关键设备 coupler //------------------------------------------------------------ ...