angularJSapi学习-angular.copy使用

angular.copy使用

效果:

初始状态:

输入信息后未保存状态:

点击save后状态:

当输入框内容和master内容不一致时:

点击reset使得user的信息被重置为master中信息:

具体代码:

 1 <!DOCTYPE HTML>
 2 <html ng-app="app">
 3 <head><script src="./angular.min.js"></script></head>
 4 <body>
 5 <div ng-controller="exampleController">
 6 <form>
 7 name:<input type="text" ng-model="user.name" />
 8 <br/>
 9 email:<input type="email" ng-model="user.email"/>
10 <br/>
11 gender:
12 <input type="radio" ng-model="user.gender" value="male"/>
13 <input type="radio" ng-model="user.gender" value="female"/>
14 </form>
15 <button ng-click="reset()" >reset</button>
16 <button ng-click="save(user)">save</button>
17 <p>user={{user}}</p>
18 <p>master={{master}}</p>
19 </div>
20 <script>
21 var app=angular.module(‘app‘,[]);
22 app.controller(‘exampleController‘,function($scope){
23    $scope.master={};
24    $scope.save = function(user){
25       $scope.master=angular.copy(user);//将user的内容复制给master
26    };
27    $scope.reset=function(){
28      angular.copy($scope.master,$scope.user);//将master内容复制给user
29    };
30    $scope.reset();
31 });
32 </script>
33
34 </body>
35 </html>
时间: 2024-10-06 18:26:13

angularJSapi学习-angular.copy使用的相关文章

嘿!@野兽,你的ng api 掉了 - - angular.copy

@野兽的 ng api 学习 -- angular.copy angular.copy 针对对象或数字创建一个深层的拷贝. 格式:angular.copy(source, [destination]); source:被拷贝的对象 destination:接收的对象 [注意:参数类型是对象或数组] 使用代码: var objA, objD = []; //objA:undefined objD:[] var objB = { text: "Hello World" }; var obj

angular.copy和angular.extend

angular.copy用于深复制,而angular.extend用于拓展.     angular.copy(src,[dst]) src:源对象 dst:目标对象,复制的对象 js中 '= '操作符复制的是指针,所以前后两个变量指向的还是内存中的同一个对象,所以在其中一个变量上操作该对象时,对另外一个变量也会生效.而angular.copy方法是深复制,会在内存中再生成一个对象,两个变量彼此独立,互不影响. 接收一个必须参数src,一个可选参数dst.如果dst没有提供,就会创建对象或者数组

angular.js 的angular.copy 、 angular.extend 、 angular.merge

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></s

AngularJS方法 —— angular.copy

描述: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中: 如果source不是对象或数组(例如是null或undefined), 则返回source: 如果source和destination类型不一致,则会抛出异常. 注意:这个是单纯复制覆盖,不是类似继承 使用方法: angular.copy(sou

angular.extend vs angular.copy

1.angular.copy angular.copy(source, [destination]);  // source: copy的对象. 可以使任意类型, 包括null和undefined.    destination:接收的对象   返回复制或更新后的对象 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中: 如果source不是对象或数组(例如是null或u

黑马程序员——OC学习笔记—— Copy

黑马程序员——OC学习笔记—— Copy ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- copy 即对象拷贝 要使用对象数据而不希望修改对象时,可以使用copy copy叫做浅拷贝  mutablecopy深拷贝 copy需要遵守NSCopying协议,实现CopywithZone方法 MutableCopy也一样要遵守相应协议 注意: OC中copy复制的对象都是不可变的  mutablecopy复制的是可变副本 浅拷贝:只拷贝地址,不

angular.copy()

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angular.copy</title> </head> <body ng-app="copyExample"> <h1>angular.copy</h1> <p> <span>描述:</span&g

一起学习angular+bootstrap+MVC--之一,入门

这篇直奔MVVM主题,本例实现一个bootstrap的下拉框. 展示了如下技术: 1.MVVM绑定(事件绑定,值绑定,循环绑定,循环绑定中嵌套事件并回传item), 2.angul多module, 建议在webstrom下面运行 1.HTML代码 1 <!doctype html> 2 <!--suppress ALL --> 3 <html ng-app="appTow"> 4 <head> 5 <script src="

黑马程序员——OC学习总结--copy用法

------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- copy的使用 copy 和 mutableCopy 当一个对象 使用  copy 和 mutableCopy 方法可以创建对象的副本 copy 需实现NSCopying协议 创建不可变副本 mutableCopy 需实现NSMutableCopying协议 创建不可变副本 深拷贝: 内容拷贝  源对象和副本指向不同的两个对象,源对象引用计数器不变,副本计数器设置为1 浅拷贝 :指针拷贝  源