angularjs1-3,$apply,$watch

最新推荐文章于 2024-11-02 12:42:04 发布

weixin_33743248

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量63

点赞数

文章标签： javascript ViewUI

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