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();
   }]);

页面显示效果:
function
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学习笔记-第二章-函数

MichaelDuan

引用和评论

OAuth2