AngularJs（2）
<!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">
/*
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（2）