首页 > 代码库 > AngularJs(2)

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="http://www.mamicode.com/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="http://www.mamicode.com/angular.min.js"></script>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘, []);

m1.controller(‘one‘,[‘$scope‘,‘$filter‘,function($scope,$filter) {

//原始数据

  var  oData=http://www.mamicode.com/[

  {‘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=http://www.mamicode.com/‘搜索‘ 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=http://www.mamicode.com/‘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="http://www.mamicode.com/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=http://www.mamicode.com/‘{{text}}‘ ng-disabled=‘isDisabled‘/>

        <!-- 输入框 ng-readonly 

true  :禁用

false :不禁用 -->

                <input type=‘text‘ value=http://www.mamicode.com/‘{{text}}‘ ng-readonly=‘isDisabled‘/>

                <input type=‘checkbox‘ ng-value=http://www.mamicode.com/‘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)