angularjs 常用方法
一 angular的copy和extend
1.angular.extend()
angular.extend():依次将第二个参数及后续的参数的第一层属性(不管是简单的属性还是对象)拷贝,赋给第一个参数的第一层属性。也就是说,如果是对象,那么引用的是同一个对象,并返回第一个参数对象。
用法1:angular.extend(b,a); 将a拷贝给b
将a拷贝给b
看一个具体的例子:
var a = {
name : 'bijian',
address : 'shenzhen',
family : {
num : 6,
amount : '80W'
}
};
var b = {};
var r = angular.extend(b, a);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
结果:
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"180W"}}
b:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
用法2:angular.extend(b, a, z); 相继将对象a,z拷贝赋给b
举个例子:
var a = {
name : 'bijian',
address : 'shenzhen',
family : {
num : 6,
amount : '80W'
}
};
var z = {
family : {
amount : '150W',
mainSource : '经营公司'
}
};
var b = {};
var r = angular.extend(b, a, z);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
结果:
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}}
r:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}}
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}}
r:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}}
2.angular.copy()
angular.extend()是浅拷贝,而angular.copy()是深拷贝。这两个有什么区别呢,看同样的例子。
用法1:angular.copy(a,b); 将对象a中的属性深度拷贝给b
这里a和b不会相互依赖,a和b是完全脱离关联的
var a = {
name : 'bijian',
address : 'shenzhen',
family : {
num : 6,
amount : '80W'
}
};
var b = {};
var r = angular.copy(a, b);
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
b.address = 'hanzhou';
b.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('b:' + JSON.stringify(b));
console.log('r:' + JSON.stringify(r));
结果:
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
b:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
用法2:var r=angular.copy(a); 将对象a对象的属性深度拷贝给对象r
var a = {
name : 'bijian',
address : 'shenzhen',
family : {
num : 6,
amount : '80W'
}
};
var r = angular.copy(a);
console.log('a:' + JSON.stringify(a));
console.log('r:' + JSON.stringify(r));
a.address = 'hanzhou';
a.family.amount = '180W';
console.log('a:' + JSON.stringify(a));
console.log('r:' + JSON.stringify(r));
结果:
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
a:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}}
二 angular判断数据类型
| 方法 | 说明 |
|---|---|
| angular.isString() | 判断是否是字符串 |
| angular.isObject() | 判断是否是对象,注意,它不把null视为对象,数组是对象 |
| angular.isArray() | 判断是否为数组 |
| angular.isDtae | 判断是否是时间 |
| angular.isNumber | 判断是否是数字 |
| angular.isDefined() | 判断是否存在 |
| angular.isUndefined() | 判断是否是undefined |
| angular.isFunction() | 判断是否为函数 |
| angular.isElement() | 判断是否是一个DOM元素或者包装的jQuery元素 |
var div = angular.element("#findMe");
var str = "1";
var num = 1;
var obj = { value: 1 };
var arr = [obj, str];
var date = new Date();
var fn = function(){
// your code
};
var divIsElement = angular.isElement(div); //divIsElement = true
var strIsString = angular.isString(str); //strIsString = true
var numIsNumber = angular.isNumber(num); //numIsNumber = true
var objIsObject = angular.isObject(obj); //objIsObject = true
var arrIsArray = angular.isArray(arr); //arrIsArray = true
var dateIsDate = angular.isDate(date); //dataIsDate = true
var fnIsFunction = angular.isFunction(fn); //fnIsFunction = true
var nullIsDefined = angular.isDefined(null); //nullIsDefined = true
var undefinedIsUndefined = angular.isUndefined(undefined); //undefinedIsUndefined = true
三 angular.forEach()
var array = ['a','b','c'];
angular.forEach(array,function(value,i){
console.log(value,i);
console.log(this);
});
遍历数组,对象也可以。value表示值,i表示索引,而this表示window对象。
四 angular的json和字符串转换
angular为我们提供了原生的JSON.parse()和JSON.stringigy()方法。
angular.fromJson():字符串转json对象
angular.toJson():json对象转字符串
var json = '{"name":"liSi", "password":"321"}';
var obj = angular.fromJson(json);
var obj ={
name:"liSi", password:"321"
}
var str = angular.toJson(obj, true);
五 大小写转换
angular.uppercase('hello');
angular.lowercase('HELLO');
angularjs 常用方法的更多相关文章
- AngularJS - 常用方法汇总
1. 数组元素的常用方法: http://www.cnblogs.com/diaosizhang/p/3729078.html 2. js的强大的splice方法 http://www.jb51.n ...
- Anglarjs 工具方法
Angularjs 常用方法 1. isArray使用 效果图如下,结果为true 2.uppercase使用 $scope.name = "zhangsan"; $scope.n ...
- AngularJs单元测试
这篇文章主要介绍了angularJS中的单元测试实例,本文主要介绍利用Karma和Jasmine来进行ng模块的单元测试,并用Istanbul 来生成代码覆盖率测试报告,需要的朋友们可以参考下,以下 ...
- angularJS测试一 Karma Jasmine Mock
AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...
- Angularjs实现简单分页
一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
随机推荐
- JAVA入门之基础语言
在上一章文章中,读者已经了解了如何搭建Java 开发环境及Java 程序的开发过程.从本篇文章开始讲解Java 的基本语言.这些基本语言的语法和其他一些编程语言相比有些是类似的,但还有很多不同之处,读 ...
- Hadoop HBase概念学习系列之HBase里的高表设计概念(表设计)(二十八)
在下面这篇博文里,我给各位博客们,分享了创建HBase表,但这远不止打好基础. HBase编程 API入门系列之create(管理端而言)(8) 在关系型数据库里,表的高表和宽表是不存在的.在如HBa ...
- Hyper-v 中 CentOS 连接外网之有线网卡
一.打开虚拟机交换管理器,查看默认的虚拟交换机 如果不是内部网络,则需要新建一个虚拟交换机,新的交换机应该使用内部网络: 二.配置虚拟机使用的交换机.如果 “默认开关” 不是内部网络,需要使用自己新创 ...
- Spring-IOC bean 生命周期之 Lifecycle 钩子
Lifecycle callbacks Initialization callbacks.Destruction callbacks 要与容器的bean生命周期管理交互,即容器在启动后和容器在销毁前对 ...
- Day10 MVC
经典三层 表述层(表示层): 前台交互,调用后台 web 业务逻辑层: 处理业务 service 数据持久层: 与数据库之间进行交互 dao 面向对象原则 面 ...
- Python之Web2py框架使用
本文主要是对Web2py框架的介绍和安装使用. 一. 介绍 全栈式Web框架:Web2py是 Google 在 web.py 基础上二次开发而来的,兼容 Google App Engine .是一个为 ...
- SSM框架之关于使用JSP作为视图展示问题解决方案
JSP作为视图层展示数据,已经有很长一段时间了,不管是在校学习还是企业工作,总会或多或少接触这个.特别是对于一些传统中小型或者一些几年前的企业而言,有很多使用JSP作为视图展示层. JSP本质是就是S ...
- python3 mock
mock的官网学习备忘录:官网地址https://docs.python.org/3/library/unittest.mock.html#quick-guide 1,安装 python3 unitt ...
- 中国气象网 气象数据开放平台 API用法 (Android)
因为要做个天气应用.须要找个天气的API.上网上搜了下都是那几个,并且基本都过时了.百度有个天气API,只是貌似仅仅能提供当天的.网上提到的中国气象接口的文章,大都用的时旧API,有的被封了,有的永远 ...
- Kafka集群配置
kafka_2.11-0.9.0.1.tgz 1.进入项目前的目录 cd /home/dongshanxia mkdir kafka #创建项目目录 cd kafka #进入项目目录 mkdir ka ...