AngularJs学习笔记-第二章-函数

发布时间:2019-07-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了AngularJs学习笔记-第二章-函数脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.Angular.copy
angular.copy(source, [destination]);

  • If no destination is supplied, a copy of the object or array is created.如果目标对象没有提供,就会创建对象或者数组的复制份
  • If a destination is PRovided, all of ITs elements (for arrays) or proPErties (for objects) are deleted and then all elements/properties From the source are copied to it.
  • If source is not an object or array (inc. null and undefined), source is returned.
  • If source is identical to 'destination' an exception will be thrown.
<!DOCTYPE htML>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>angular-copy demo</title>
</head>
<body>


<div ng-controller="ctrl">
  <form novalidate>
     姓名: <input type="text" ng-model="user.name" /><br />
     邮件: <input type="email" ng-model="user.email" /><br />
     性别: <input type="radio" ng-model="user.gender" value="male" />male
     <input type="radio" ng-model="user.gender" value="female" />female<br />
     <button ng-click="reset()">重置</button>
     <button ng-click="update(user)">保存</button>
    </form>
   <pre>form = {{user | json}}</pre>
   <pre>master = {{master | json}}</pre><!--使用json数据的格式保存并且显示master里面的数据-->
</div>


</body>
<script src="js2/Angular.js"></script>
<script src="js/submit.js"></script>
</html>

js
var APP = angular.module('app', [])
   APP.controller('ctrl', ['$scope', function($scope) {
       //angular.copy(source, [destination]);
       //1,If no destination is supplied, a copy of the object or array is created.如果目标对象没有提供,就会创建对象或者是数组的复制份
       //2,If a destination is provided, all of its elements (for arrays) or properties (for objects) are deleted and then all elements/properties from the source are copied to it.
       //3,If source is not an object or array (inc. null and undefined), source is returned.
       //4,If source is identical to 'destination' an exception will be thrown.
     $scope.master= {};
     $scope.update = function(user) {
       // Example with 1 argument
       $scope.master= angular.copy(user);//没有提供destination,就会创建,并且赋值给master
     };

     $scope.reset = function() {
       // Example with 2 arguments
       angular.copy($scope.master, $scope.user);//destination提供了,删除原有的元素,然后从原数据源中copy所有的数据
     };

     $scope.reset();
   }]);

页面显示效果:

AngularJs学习笔记-第二章-函数


2,$watch函数
使用$watch函数监控数据模型的变化,当你的数据模型的某一部分发生变化的时候,$watch函数可以向你发出通知,你可以监控每一个对象的属性,也可以监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以被当作js函数计算出来,就可以被$watch函数监控:
$watch(watchFn,watchAction,deepWatch)
watchFn:该参数是一个带有angular表达式或者函数的字符串,它会返回被监控数据模型的当前值。
watchAction:这是一个函数或者表达式,当watchFn发生变化时会被调用。
deepWatch:如果设置为true,这个可选的布尔型参数将会命令angular去检查被监控对象的每一个属性是否发生变化。
$watch函数会返回一个函数,当你不再需要接受变更通知时,可以利用这个返回的函数注销监听器.
如果我们需要监听一个属性,然后接着注销监控,我们可以使用如下代码:
var item = $scope.$watch('module.property',callbackonchange());

<!doctype html>
<html lang='en' ng-app>
  <head>
    <title>购物车(2)</title>
    <link href="bootstrap.css" rel="stylesheet">
    <meta Content-Type="html/text;charset=utf-8">
  </head>
  <body>
    <div ng-controller="ctrl">
      <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>总消费: {{totalCart() | currency}}</div>
      <div>打折: {{bill.discount | currency}}</div>
      <div>打折后消费: {{subtotal() | currency}}</div>
    </div>
  <script src="https://ajax.GOOGLEapis.COM/ajax/libs/angularjs/1.0.8/angular.min.js"></script>




<script>
    function ctrl($scope) {
      $scope.bill = {};
      $scope.items = [
        {title: '罐头', quantity: 8, price: 3.95},
        {title: '可口', quantity: 17, price: 12.95},
        {title: '橙汁', 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.bill.discount;
      };
      function calculateDiscount(newValue, oldValue, scope) {//计算打折的费用
        $scope.bill.discount = newValue > 100 ? 10 : 0;//消费大于100打折10块
      }
      $scope.$watch($scope.totalCart, calculateDiscount);//这里有个$watch函数,在totalCart的值上面设置了一个监控,用来计算此次购物的总价,只要这个值发生变化,监控就会调用calculateDiscount()然后
      我们就可以把折扣设置为相应的值,如果总价超过100,将会把折扣设置为10,否则为0.
    }
  </script>



脚本宝典总结

以上是脚本宝典为你收集整理的AngularJs学习笔记-第二章-函数全部内容,希望文章能够帮你解决AngularJs学习笔记-第二章-函数所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。