Angularjs 工具方法
- angular.isArray – 判断是否是一个数组
angular.module('myApp',[])
.controller('myCtr',function($scope){
var arr = [1,1,1,1,1,1];
var hasArr = angular.isArray(arr);
console.log(hasArr);
})
- angular.isDate – 判读是否是一个日期
angular.module('myApp',[])
.controller('myCtr',function($scope){
var date = new Date();
var hasDate = angular.isDate(date);
console.log(hasDate);
})
- angular.isDefined – 判断一个数据是否是defined类型
angular.module('myApp',[])
.controller('myCtr',function($scope){
var a = [];
var isDefined1 = angular.isDefined(a);
var isDefined2 = angular.isDefined(undefined);
console.log(isDefined1); //-true
console.log(isDefined2); //-false
})
- angular.isElement – 判断是否是一个标签
angular.module('myApp',[])
.controller('myCtr',function($scope){
var body = document.querySelector('body');
var arr = [];
var isElement1 = angular.isElement(body);
var isElement2 = angular.isElement(arr);
console.log(isElement1)//-true
console.log(isElement2)//-false
})
- angular.isFunction – 判断是否为一个函数
angular.module('myApp',[])
.controller('myCtr',function($scope){
var fn1 = function(){
console.log('我是一个函数');
};
function fn2(){
console.log('我也是一个函数');
}
var arr = [];
var isFunction1 = angular.isFunction(fn1);
var isFunction2 = angular.isFunction(fn2);
var isFunction3 = angular.isFunction(arr);
var isFunction4 = angular.isFunction(function(){console.log('我还是一个函数')});
console.log(isFunction1);//-true
console.log(isFunction2);//-true
console.log(isFunction3);//-false
console.log(isFunction4);//-true
})
- angular.isNumber – 判断是否为一个数字类型数据
angular.module('myApp',[])
.controller('myCtr',function($scope){
var num = 123123123;
var str1 = '阿斯达';
var str2 = '123123';
var isNumber1 = angular.isNumber(num);
var isNumber2 = angular.isNumber(str1);
var isNumber3 = angular.isNumber(str2);
console.log(isNumber1);//-true
console.log(isNumber2);//-false
console.log(isNumber3);//-false
})
- angular.isObject – 判断是否为一个对象
angular.module('myApp',[])
.controller('myCtr',function($scope){
var num = 123123123;
var str1 = '阿斯达';
var obj = {name:'LamHo'};
var isObject1 = angular.isObject(num);
var isObject2 = angular.isObject(str1);
var isObject3 = angular.isObject(obj);
console.log(isObject1);//-false
console.log(isObject2);//-false
console.log(isObject3);//-true
})
- angular.isString – 判断是否为一个字符串
angular.module('myApp',[])
.controller('myCtr',function($scope){
var num = 123123123;
var str1 = '阿斯达';
var obj = {name:'LamHo'};
var isString1 = angular.isString(num);
var isString2 = angular.isString(str1);
var isString3 = angular.isString(obj);
console.log(isString1);//-false
console.log(isString2);//-true
console.log(isString3);//-false
})
- angular.uppercase – 把字符串转为大写(英文)
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.str = 'this is string';
$scope.newStr = angular.uppercase($scope.str);
console.log($scope.str);//-this is string
console.log($scope.newStr);//-THIS IS STRING
})
- angular.lowercase – 把字符串转为小写(英文)
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.str = 'THIS IS STRING';
$scope.newStr = angular.lowercase($scope.str);
console.log($scope.str);//-THIS IS STRING
console.log($scope.newStr);//-this is string
})
- angular.equals – 把两个变量进行比较
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.equalsStr1 = 'THIS IS STRING';
$scope.equalsStr2 = 'this is string';
$scope.eqNumber1 = 123;
$scope.eqNumber2 = 321;
$scope.eqNumber3 = 123;
$scope.obj1 = {name:'LamHo',age:'22'};
$scope.obj2 = {name:'LamHo1',age:'23'};
$scope.obj3 = {name:'LamHo',age:'22'};
console.log(angular.equals($scope.equalsStr1,$scope.equalsStr2));//-false
console.log(angular.equals($scope.eqNumber1,$scope.eqNumber2));//-false
console.log(angular.equals($scope.eqNumber1,$scope.eqNumber3));//-true
console.log(angular.equals($scope.obj1,$scope.obj2));//-false
console.log(angular.equals($scope.obj1,$scope.obj3));//-true
})
- angular.extend – 对象的拓展,对象间的属性继承
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.obj1 = {name:'LamHo',age:'22'};
$scope.obj2 = {name:'Jay',age:'32'};
$scope.obj3 = {school:'sada',sex:'man'};
$scope.newObj1 = angular.extend($scope.obj1,$scope.obj2);//obj2会替换obj1中相同的key的value
console.log($scope.newObj1);//-Object {name: "Jay", age: "32"}
$scope.newObj2 = angular.extend($scope.obj1,$scope.obj3);//如果obj1中没有obj3里相同的key,会新增obj3的key和value给obj1
console.log($scope.newObj2);//-Object {name: "Jay", age: "32", school: "sada", sex: "man"}
})
- angular.fromJson – 字符串转JSON
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.str = '{"name":"LamHo","age":"22","school":"sada","sex":"man"}';
$scope.obj = angular.fromJson($scope.str);
console.log($scope.obj);//-Object {name: "LamHo", age: "22", school: "sada", sex: "man"}
})
- angular.toJson – JSON转字符串
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.obj1 = {name:'LamHo',age:'22',school:'sada',sex:'man'};
$scope.str1 = angular.toJson($scope.obj1);
$scope.str2 = angular.toJson($scope.obj1,true);//如果传入第二个参数为true会格式化字符串,默认false
console.log($scope.str1);//-{"name":"LamHo","age":"22","school":"sada","sex":"man"}
console.log($scope.str2);
// {
// "name": "LamHo",
// "age": "22",
// "school": "sada",
// "sex": "man"
// }
})
- angular.copy – 对象的深拷贝
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.obj = {
"name":"LamHo",
"age":"22",
"school":"sada",
"sex":"man"
};
$scope.newObj = angular.copy($scope.obj);
console.log($scope.newObj);
})
- angular.forEach – 对象的遍历
angular.module('myApp',[])
.controller('myCtr',function($scope){
$scope.obj1 = {
"name":"LamHo",
"age":"22",
"school":"sada",
"sex":"man"
};
$scope.obj2 = {};
//基本循环
angular.forEach($scope.obj1,function(value,key){
console.log(key + ':' + value);
});
/**
* 还有第三个参数 angular.forEach(obj, iterator, [context])
* context 迭代函数中上下文
* **/
angular.forEach($scope.obj1,function(value,key){
console.log(key + ':' + value);
console.log(this);//-指向$scope.obj2
/**
* 我们可以做以下操作
* 每遍历一个就为this添加对应的key和val
* **/
this[key] = value;
console.log(this);
},$scope.obj2);
/**
* 在一般情况下我们可以这么做
* **/
$scope.obj3 = {};
angular.forEach($scope.obj1,function(value,key){
console.log(key + ':' + value);
/**
* 我们可以做以下操作
* 每遍历一个就为this添加对应的key和val
* **/
$scope.obj3[key] = value;
console.log($scope.obj3);
});
})
- angular.bind – 返回一个新的函数,绑定这个函数的this指向
angular.module('myApp',[])
.controller('myCtr',function($scope){
/**
* angular.bind(self, fn, args)
* 作用:返回一个新的函数,绑定这个函数的this指向self
* 参数:
* self:新函数的上下文对象
* fn:需要绑定的函数
* args:传递给函数的参数
*
* 返回值:this指向self的新函数
*
* **/
var obj = {
name: 'xxx',
print: function (country) {
console.log(this.name + ' is form ' + country);
}
};
var self = {
name: 'yyy'
};
var bindFn = angular.bind(self, obj.print, 'China');//var bindFn = angular.bind(self, obj.print, ['China']);
obj.print('American'); //$ xxx is form American
bindFn(); //$ yyy is form China
//注意:bind会根据你的参数类型来决定调用call或apply,所以args可以是一个个数据,也可以是一个数组哦。
})
- angular.bootstrap – 手动启动模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/ng/js/angular.js"></script>
</head>
<body>
<div ng-app="myApp1" ng-controller="myCtr">{{text}}</div>
<div ng-app="myApp2" ng-controller="myCtr">{{text}}</div>
<script>
angular.module('myApp1',[])
.controller('myCtr',function($scope){
$scope.text = '我是模块1';
});
angular.module('myApp2',[])
.controller('myCtr',function($scope){
$scope.text = '我是控模块2';
});
</script>
</body>
</html>
一般情况下,angular只会启动一个module,按照上面的写法会出现myApp1启动成功,而myApp2则没有启动。解决方法就是通过用angular.bootstrap进行手动启动,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/ng/js/angular.js"></script>
</head>
<body>
<div id="div1" ng-controller="myCtr">{{text}}</div>
<div id="div2" ng-controller="myCtr">{{text}}</div>
<script>
angular.module('myApp1',[])
.controller('myCtr',function($scope){
$scope.text = '我是模块1';
});
angular.module('myApp2',[])
.controller('myCtr',function($scope){
$scope.text = '我是模块2';
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("div1"),["myApp1"]);
angular.bootstrap(document.getElementById("div2"),["myApp2"]);
});
</script>
</body>
</html>
推荐一个比较好的同类型文章:
angularjs学习笔记—工具方法