AngularJs
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs相关的知识，希望对你有一定的参考价值。
<!doctype html>
<!-- 要在这里引用模块名 -->
<html lang="en" ng-app=‘myApp‘>
<head>
<meta charset="UTF-8">
<title>AngularJs初识2</title>
<!--引入AngularJs的文件-->
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
//模块化:angular.module(模块名，空数组)
/*
var phonecatApp = angular.module(‘phonecatApp‘, []);
phonecatApp.controller(‘PhoneListCtrl‘,function($scope,$rootScope) {
$scope.name=‘Hello world‘;
})
//建议用这种方式,解决压缩问题!
var m1 = angular.module(‘myApp‘, []);
m1.controller(‘one‘,[‘$scope‘,function($scope) {
$scope.name=‘Hello world‘;
}])
m1.controller(‘two‘,[‘$scope‘,function($scope) {
$scope.name=‘Hi world‘;
}])
工具方法:
1:angular.bind();---类似---》call()/apply(); 改this指向
function show(a,b){
alert(this);
alert(a+":"+b);
}
angular.bind(document,show)(3,4);
2:angular.copy();-------》拷贝对象
var a ={
‘name‘:‘张三‘
};
var b = {
‘age‘:‘18‘
};
var c = angular.copy(a,b);------->a把所有值覆盖给了b
console.log(c);
console.log(b);
3:angular.extend();-------》继承对象
var a ={
‘name‘:‘张三‘
};
var b = {
‘age‘:‘18‘
};
var c = angular.extend(a,b); ------》a继承了b的属性
console.log(c);
console.log(a);
console.log(b);
4：angular.isArray(); 判断是否为一个数组对象
var arr = [];
console.log(angular.isArray(arr));
5: angular.isDate(); 判断是否为一个日期对象
6： angular.isDefined(); 判断是否存在
7: angular.isUndefined(); 判断是否不存在
8: angular.isFunction(); 判断是否为一个函数
9: angular.isNumber(); 判断是否为一个数字
10: angular.isObject(); 判断是否为一个对象
11: angular.isString(); 判断是否为一个字符串对象
12: angular.isElement(); 判断是否为一个元素（标签对象）
13: angular.version 获取AngularJs的版本号
console.log(angular.version);
14:angular.equals(a,b); 比较是否相等
注意:
var a = NaN;
var b = NaN;
a==b; false
console.log(angular.equals(a,b)); //为true
15:angular.forEach(对象,回调函数,result);
对象:数组对象，集合对象,json对象...
回调函数有两个参数:值,对象名(下标)
result:在回调函数中this代表它。
var json={
‘name‘:‘八重樱‘,
‘age‘ :‘500‘
};
var result={
};
angular.forEach(json,function(value,index){
console.log(index+":"+value);
this[index]=value;
this.love=‘卡莲‘
},result);
console.log(result);
16: angular.fromJson(); 将字符串转换为json对象类似与JSON.parse();
var str = ‘{"name":"芽衣","age":"18"}‘;
//var json=JSON.parse(str);
var json = angular.fromJson(str);
console.log(json);
angular.toJson(); 将json对象转化为字符串类似与JSON.stringify();
第二个参数,true.是否换行，可读性高
var json={
‘name‘:‘八重樱‘,
‘age‘ :‘500‘
};
//var str = JSON.stringify(json);
var str = angular.toJson(json,true);
console.log(str);
console.log(typeof(str));
17: angular.lowercase/uppercase 大小写转换
console.log(angular.lowercase(‘HELLO‘));
console.log(angular.uppercase(‘hello‘));
18: angular.bootstrap(绑定模块的对象,[]) 动态初识化模块 不使用ng-app
[] ---------->ng-app
[‘myApp‘]---->ng-app=‘myApp‘
var m1 = angular.module(‘myApp‘, []);
m1.controller(‘one‘,[‘$scope‘,function($scope) {
$scope.name=‘Hello world‘;
}])
m1.controller(‘two‘,[‘$scope‘,function($scope) {
$scope.name=‘Hi world‘;
}])
document.onclick=function(){
angular.bootstrap(this,[‘myApp‘]);
}
$scope.$apply() 看实例!
setTimeout(function(){
$scope.name=‘ok‘;(值不会改变)
},2000);
var m1 = angular.module(‘myApp‘, []);
m1.controller(‘one‘,[‘$scope‘,function($scope) {
$scope.name=‘Hello world‘;
setTimeout(function(){
$scope.$apply(function(){
$scope.name=‘ok‘;(值会改变)
});
},2000);
}])
document.onclick=function(){
angular.bootstrap(this,[‘myApp‘]);
}
angular.module().run();//建立全局作用域的属性
var m1 = angular.module(‘myApp‘, []);
m1.run([‘$rootScope‘,function($rootScope){
$rootScope.name=‘Hello world‘;
}]);
console.log(m1);
自定义过滤器:
var m1 = angular.module(‘myApp‘, []);
//让字符串的首字母大写
m1.filter(‘firstUpper‘,function(){
return function(str,num){
return str.charAt(0).toUpperCase()+str.substring(1)+num;
}
});
m1.controller(‘one‘,[‘$scope‘,‘$filter‘,function($scope,$filter) {
//$scope.name=‘Hello world‘;
$scope.name=$filter(‘firstUpper‘)(‘Hello world‘,2);
}])
ng-repeat指令-----》in遍历集合
<li ng-repeat=‘data in dataList‘>{{data}}</li>
var m1 = angular.module(‘myApp‘, []);
m1.controller(‘one‘,[‘$scope‘,‘$filter‘,function($scope,$filter) {
//$scope.name=‘Hello world‘;
$scope.dataList=[‘姬子‘,‘琪雅娜‘,‘芽衣‘];
}])
表格例子：
<!doctype html>
<html lang="en" ng-app=‘myApp‘>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var m1 = angular.module(‘myApp‘, []);
m1.controller(‘one‘,[‘$scope‘,‘$filter‘,function($scope,$filter) {
//原始数据
var oData=[
{‘name‘:‘八重樱‘,‘age‘:‘500‘,‘phone‘:‘134845‘,‘email‘:‘cc.com‘},{‘name‘:‘芽衣‘,‘age‘:‘15‘,‘phone‘:‘13455845‘,‘email‘:‘cb.com‘},{‘name‘:‘琪雅娜‘,‘age‘:‘13‘,‘phone‘:‘13455845‘,‘email‘:‘ca.com‘}
];
$scope.dataList=oData;
$scope.fn_sort=function(arg){
//开关
arguments.callee[‘fn_sort‘+arg]=!arguments.callee[‘fn_sort‘+arg];
//排序，第三个参数，控制从大---》小，小----->大
$scope.dataList=$filter(‘orderBy‘)($scope.dataList,arg,arguments.callee[‘fn_sort‘+arg]);
}
$scope.fn_serach = function(){
//过滤器
$scope.dataList=$filter(‘filter‘)(oData,$scope.seaVal);
}
}])
</script>
</head>
<body>
<div ng-controller=‘one‘>
<input type=‘text‘ ng-model=‘seaVal‘/> <input type="button" value=‘搜索‘ ng-click=‘fn_serach()‘>
<hr/>
<table border=‘1‘>
<tr>
<td ng-click=‘fn_sort("name")‘>姓名</td>
<td ng-click=‘fn_sort("age")‘>年龄</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr ng-repeat=‘data in dataList‘>
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.phone}}</td>
<td>{{data.email}}</td>
</tr>
</table>
</div>
</body>
</html>
事件指令
ng-click------------------->onclick
ng-mousedown--------------->onmousedown
其他都类似
区别在于，js原生的事件不支持{{}}表达式
ng-readonly ：输入框等不是按钮的禁用
ng-disabled:按钮禁用
true:禁用
false:不禁用
ng-checked：是否选中
ng-value 和value
na-value=‘text‘=======>value=‘{{text}}‘ //提高用户体验
$interval指令 用法类似setInterval()
禁用例子:
<!doctype html>
<html lang="en" ng-app=‘myApp‘>
<head>
<meta charset="UTF-8">
<title>ng-disabled</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var m1 = angular.module(‘myApp‘, []);
//需要添加$interval
m1.controller(‘one‘,[‘$scope‘,‘$interval‘,function($scope,$interval) {
var now = 5;
$scope.text=now+‘秒‘;
$scope.isDisabled=true;
/* 第一种，使用$apply
var setTime=setInterval(function(){
$scope.$apply(function(){
now--;
$scope.text=now+‘秒‘;
if(now==0){
clearInterval(setTime);
$scope.isDisabled=false;
$scope.text=‘可以点击啦‘;
}
});
},1000);
*/
//第二种使用$interval指令 用法类似setInterval()
var setTime = $interval(function(){
now--;
$scope.text=now+‘秒‘;
if(now==0){
$interval.cancel(setTime);
$scope.isDisabled=false;
$scope.text=‘可以点击啦‘;
}
},1000);
}]);
</script>
</head>
<body>
<div ng-controller=‘one‘>
<!-- 按钮 ng-disabled
true :禁用
false :不禁用 -->
<input type=‘button‘ value=‘{{text}}‘ ng-disabled=‘isDisabled‘/>
<!-- 输入框 ng-readonly
true :禁用
false :不禁用 -->
<input type=‘text‘ value=‘{{text}}‘ ng-readonly=‘isDisabled‘/>
<input type=‘checkbox‘ ng-value=‘text‘ ng-checked=‘isDisabled‘/>
<!-- 数据显示优化
ng-cloack:
原理；数据未解析前，div的display:none
数据解析后，div的display:block
ng-bind:适用用单个数据
ng-bind-template:适用用多个数据
-->
<div ng-cloack>{{text}}</div>
<div ng-bind=‘text‘></div>
<div ng-bind-template=‘{{text}},{{text}}‘></div>
</div>
</body>
<script type="text/javascript">
alert("1");
</script>
</html>
*/
</script>
</head>
<body>
<div ng-controller=‘one‘>
</div>
<!-- <div ng-controller=‘one‘>{{name}}</div>
<div ng-controller=‘two‘>{{name}}</div> -->
</body>
</html>
本文出自 “12897581” 博客，请务必保留此出处http://12907581.blog.51cto.com/12897581/1929085
以上是关于AngularJs的主要内容，如果未能解决你的问题，请参考以下文章