darkblueLove
darkblueLove

angularJs 笔记

转载请注明出处：http://blog.csdn.net/sllailcp/article

 

看到有说笔记乱的，因为笔记是好久之前边自学边随手写的，所以当时没整理，现在隔了太久，笔记太长，且当时写的很多小例子都忘了，所以就过来粗略的整理下。

 

angular（网址：docs.angularjs.cn/api/mg/function/angular.element）

angular 插件地址（http://www.bootcdn.cn/angular.js/）

ng-app:初始化，不写的话，程序不执行；可以写在html上还可以写到标签上；

 

function Angulars($scope,$rootScope){
$scope.name='hellow';
$rootScope.age=30'';
}
$rootScope:作用域是全局
先遍历局部的如果局部没有再遍历全局的

 

ng-click：指令  点击（和click相似）

视图影响数据，数据再影响视图

ng-model

 

金钱格式化：currency（美元），
{{inpone.money * inpone.num | currency：'￥‘}}

 

$scope.$watch

-监听数据变化

-三个参数 

用法：

$scope.$watch('box.money' , function(){ ...  })//box.money前面不要加$scope,监听box.money的变化
$scope.$watch('inpone' , function(){ ...  },true)//后面加true，前面inpone，是监听整体是的
$scope.$watch($scope.fn , function(newval,oldval){ ...  },true)//newval最新的值，old老值

 

$timeout：$timeout和setTimeout用法是一样的

$scope.$apply//监听数据有没有变化，一单有变化就会影响视图
	setTimeout(function(){
		$scope.$apply(function(){
			$scope.name="hahahha";
		})
	})

 

模块化：

var m1=angular.module('myApp',[]);
m1.controller//局部作用域
m1.controller('Aa',['$scope',function($scope){
	$scope.name="哈哈哈！";
}])
//中括号的第一个'$scope'是防止代码压缩后出现$s,这种状况，这个'$scope'对应的是function($scope)里面的参数（不可改变的形参）

 

angular.bind();绑定事件

function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
angular.bind(document,show,3)(4);
 如果需要改变this的指向，可以用 $.proxy()

 

angular.copy();  //拷贝对象

var a = {
	name : 'hello'
};
var b = {
	age : '20'
};
var c = angular.copy(a,b);   //a把所有值覆盖给了b
console.log(b);

 

angular.extend();   //对象继承

indentity//参数传递的是什么，打印的就是什么

noop()//空函数，没有内容。

lowercase（）//转小写

uppercase（）//转大写

 

element//  选择元素

eg：angular.element(id).css('background','red')；

 

bootstrap

ng-app不加的情况下，再点击的情况下初始化如下：
angular.bootstrap(document,['myApp'])//初始化在document身上；
可以进行多次初始化：
angular.bootstrap(aDiv[0],['myApp1']);
angular.bootstrap(aDiv[1],['myApp2']);

 

m1.run();//初始化全局数据

m1.run(['$rootScope'],function($rootScope){
	$rootScope.name="hellow word";
})

 

过滤器：| 名称

currency 金钱
number  数字分隔（有小数时，默认保存3位数，后面可以传参）  | number：4  保留4位小数；
lowercase/uppercase:转大小写；
json 格式化了json代码
limitTo  截取的操作（数组，字符串） | limitTo： 2  只截取前两位
date   针对时间的（把毫秒进行格式化）  | date ：'yyyy'（有参数好多） 格式啊成日期
orderBy  排序；  |orderBy:'age'  以age排序；  $scope.name=[{color:'red',age:'10'},{color:'yellow',age:'20'},{color:'green',age:'30'}]
filter 过滤（按value中的值过滤key值）   |filter :'10'   就会把{color:'red',age:'10'}这一条匹配出来。

 

过滤器的扩展：

组合使用：  |limitTo:2 | uppercase   截取前两个字符并且转为大写
js使用过滤器
m1.controller('Aa',['$scope','$filter',function($scope,$filter){
	$scope.name=$filter('date')('2343423','hh');
}])
html中引用
{{name}}

 

 

自定义过滤器：

-angular.module

》controller/run

》filter

m1.filter('firstUpper',function(){//firstUpper是自定义的过滤器
	return function(str,num){
		console.log(2)
		return str.charAt(0).toUpperCase()+str.substring(1);
	}	
})

html中引用
 
  
{{ name| firstUpper : 2}}
 
  
 
 
  
angular.isDate  是不是时间对象
 
  
angular.isDefined 判断元素是存在的
 
  
angular.isUndefined  判断元素是不存在的   
 
  
angular.isFunction 是不是函数
 
  
angular.isNumber 判断是不是是数字
 
  
angular.isObiect 判断是不是对象
 
  
angular.isString 判断是不是字符串
 
  
angular.isElement 判断是不是一个元素
 
  
判断当前的angularJs库的版本
 
  
判断两个元素是否相等
 
  
forEach 用来遍历元素
 
  
formJson/toJson 对json的解析
 
  
 辅助方法 ；；参数传递的是什么，计算得结果就是这个参数
 
  
indentity//参数传递的是什么，打印的就是什么
 
  
var str='hellow'
 angular.indentity(str);
结果：hellow
 
  
 
 
  
 
 
  
ng-app
 
  
ng-controller
 
  
ng-repeat:遍历
 
  
 
 
  
orEach 用来遍历元素：
 
  
$scope.allPrice=function(){
    $scope.allprice=0;
    angular.forEach($scope.dataList,function(data,index,array){
        $scope.allprice+=parseInt(data.price)
    })
    return $scope.allprice
}
	@scope.dataList=['aaa','bbb','ccc']


    	
  • {{data}}
    •  
  
     
     
  
     
     
  
    callee:返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文. 
     
  
    callee是arguments 的一个属性成员，它表示对函数对象本身的引用，这有利于匿名 
     
  
    arguments.callee['Sort'+arg]=!arguments.callee['Sort'+arg];  //Sort(arg)是个函数
     
  
     
     
  
     
     
  
    ng-repeat 指令
     
  
    - $index  //遍历索引号
     
  
    - $first  //只要是集合的第一项就会返回真（true），其余项会返回假（false）
     
  
    - $middle //只要是集合的第一项和最后一项就会返回真（true），其余项会返回假（false）
     
  
    - $last   //只要是集合的最后一项就会返回真（true），其余项会返回假（false）
     
  
    - $even   //只要是集合的奇数行就会返回真（true），其余项会返回假（false）
     
  
    - $odd   //只要是集合的偶数行就会返回真（true），其余项会返回假（false）
     
  
    - ng-repeat-start
     
  
    - ng-repeat-end
     
  
    eg:

   {{ $first }}

     
  
     
     
  
    form中的指令
     
  
    - ng-selected  选中的一项
     
  
    - ng-change  改变内容
     
  
    - ng-copy 复制内容时触发
     
  
    - ng-cut 剪切内容时触发
     
  
    - ng-paste 粘贴内容时触发
     
  
    eg：
 

{{bb}}               
{{cc}}
{{dd}}
{{ee}}
     
  
     
     
  
    ng-disabled  //按钮禁用
     
  
    -服务$interval //禁用相关的操作（对按钮不起作用）
     
  
    ng-readonly
     
  
    ng-checked
     
  
    ng-value  //不用加{{ text }}，如果不加ng-，要等到js加载完后才解析这个表达式
     
  
    eg:
        
        
        
     
  
     
     
  
     
     
  
    $interval(function(){},1000);
     
  
    $timeout(function(){},1000);
     
  
    $interval.cancel(timer)//清楚定时器
     
  
     
     
  
     
     
  
    ng-bind //跟ng-value 作用相似
     
  
    ng-cloak //没有解析完，也不现实表达式，提高用户体验度
     
  
    ng-bind-template//多个表达式ng-bind-template=“{{text1}}，{{text2}}”
     
  
    ng-bind-html //把表达式中的标签添加到页面中；
     
  
    -http:www.bootcdn.cn/angular.js/（http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js）
     
  
    ng-non-bindable //不让表达式解析，写的是什么，解析的就是什么，一般用的不多
     
  
    eg:

    

     
  
     
     
  
    ng-class  //
    {{ text }}
       red和yellow都是类的名字，ng-class="{{ sClass }}"要用表达式的方式
     
  
    ng-style  //
    {{ text }}
        ng-style="{{ style }}"要用表达式的方式 ng-style="{display:$first ? 'block' :  'none'}"
     
  
    ng-href   //一单表达式没加载完，是看不见href的值的，是有好处的。
     
  
    ng-src    //同上
     
  
    ng-attr-(suffix) //自定义属性  eg：ng-attr-title="{{ text }}"
     
  
     
     
  
     
     
  
    ng-show //元素的显示隐藏  通过css样式操作  ng-show="true" (false);
     
  
    ng-hide //元素的隐藏显示   通过css样式操作  ng-show="true" (false);
     
  
    ng-if  //不是通过css样式操作，而是对dom节点操作，删除添加节点
     
  
    ng-switch  //
     
  
     -on
     
  
     -default
     
  
     -when
     
  
    ng-open       //ng-open="true"
     
  
     
     
  
    ng-init   //初始化 
     
  
    ng-include//包含一段代码（引入到页面中）
     
  
    ng-model  //扩展
     
  
     - ng-model-options
     
  
     - updateOn   (   ng-model-options="{updateOn：'blur'}"   )
     
  
     
     
  
    ng-controller  //可以面向对象得写法
     
  
     - as    //Fn as a1    {{ a1.text }}    //a1表示构造函数所创建出来的对象
     
  
     
     
  
     
     
  
    标签指令：：：：：