码迷,mamicode.com
首页 > 移动开发 > 详细

angularjs1-3,$apply,$watch

时间:2017-07-23 18:10:18      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:点击   控制   asc   doctype   title   tle   model   price   round   

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

标签:点击   控制   asc   doctype   title   tle   model   price   round   

原文地址:http://www.cnblogs.com/yaowen/p/7224938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!