浅谈angular.copy() 深拷贝

因为项目中需要拷贝，查阅angularjs API文档，发现对angular.copy() 的解释：

复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。

1> 如果省略了destination，一个新的对象或数组将会被创建出来；
2> 如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中；
3> 如果source不是对象或数组（例如是null或undefined）, 则返回source；
4> 如果source和destination类型不一致，则会抛出异常。 注意：这个是单纯复制覆盖，不是类似继承。

使用方法：

angular.copy(source, [destination]);

参数：

参数名称 参数类型 描述
source * 被copy的对象. 可以使任意类型, 包括null和undefined.
destination (optional) Object,array copy去的目的地. 可以省略, 如果不省略, 其必须和source是同类

返回值：

返回复制或更新后的对象

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>

  <body ng-app="copyApp">
    <div ng-controller="CopyController">
      <form novalidate class="simple-form">
        姓名: <input type="text" ng-model="user.name" /><br />
        年龄：<input type="number" ng-model="user.age" /><br />
        邮箱: <input type="email" ng-model="user.email" /><br />
        性别：<input type="radio" ng-model="user.gender" value="male" /> 男
        <input type="radio" ng-model="user.gender" value="female" /> 女
        <br />
        <button ng-click="reset()">重置</button>
        <button ng-click="update(user)">保存（拷贝）</button>
      </form>
      <pre>form = {{user | json}}</pre>
      <pre>master = {{master | json}}</pre>
    </div>

    <script>
      angular.module('copyApp', [])
        .controller('CopyController', ['$scope', function($scope) {
          $scope.master = {};
          $scope.update = function(user) {
            $scope.master = angular.copy(user);
            console.log($scope.master);
          };
          $scope.reset = function() {
            angular.copy($scope.user, $scope.master);
            console.log($scope.master);// Object { }
            console.log($scope.user); //undefined
          };
          $scope.reset();
        }]);
    </script>
  </body>

</html>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularJS深拷贝详解

    在了解angular深拷贝之前,首先看下边的代码. var a = 1; var b = a; b = 2; console.log(a + " " + b); 很显然,输出的a的值是1,b的值是2.接下来再看一段代码. var a = [1,2,3,4]; var b = a; b.push(5); console.log(a + " " + b); 很显然,输出a的值是[1,2,3,4,5],b的值是[1,2,3,4,5].再来看下一段代码. var a = {

  • AngularJS API之copy深拷贝详解及实例

    AngularJS API之copy深拷贝详解及实例

    angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果只有一个参数(没有指定拷贝的对象),则返回一个拷贝对象 如果指定了destination,则会深拷贝对象复制给destination 如果source是null或者undefined,那么会直接返回source 如果source就是desitination,那么会报错. 下面看看使用样例: <html> <head> &

  • 浅谈angular.copy() 深拷贝

    浅谈angular.copy() 深拷贝

    因为项目中需要拷贝,查阅angularjs API文档,发现对angular.copy() 的解释: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 1> 如果省略了destination,一个新的对象或数组将会被创建出来: 2> 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中: 3> 如果source不是对象或数组(例如是null或undefined), 则返回source: 4> 如果source和d

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 浅谈angular懒加载的一些坑

    浅谈angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

  • 浅谈angular表单提交中ng-submit的默认使用方法

    在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng

  • 浅谈Angular的12个经典问题

    浅谈Angular的12个经典问题

    1. 请解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理的.@angular/core会创建组件,渲染它,创建并呈现它的后代.当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它.Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作.构造函数会在所有生命周期事件之前执行.每个接口都有一个前缀为ng的hook方

  • 浅谈Angular路由复用策略

    一.引言 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除:当然在绝大多数场景下这是合理的. 但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验:一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退--用户懵逼了. Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用Component

  • 浅谈Angular的$q, defer, promise

    1. $q $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 2. defer defer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例). deferred 实例旨在暴露派生的Promise 实例,以及被用来作为成功完成或未成功完成的信号API,以及当前任务的状态.这听起来好复杂的样子,总结$q, defer, promise三者之间的关系如下所示. var deferred = $q

  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. 什么是路由守卫? Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate 控制是否允许进入路由. canActivateChild

  • 浅谈Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

随机推荐