Angular学习笔记(2)

在Angular中每一个事件相当于一个指令,都是以ng-开头的

例如:

ng-click=“fn()”定义了一个click事件

在Angular默认要加上()。

在Angular中事件回调函数定义在作用域中

在Angular中传入事件对象为$event即,onclick="change($event)"

在Angular中事件回调函数中的作用域就是控制器的作用域

在Angular中在事件回调函数内部设置作用域有两种方式

第一种是通过this设置

第二种是通过$scope设置

即,

扫描二维码关注公众号,回复: 2895114 查看本文章

app.controller('myCtrl',function($scope){
  $scope.colors=['red','green','blue']
  $scope.chooseColor='';
  //定义事件回调函数
  $scope.choose=function()
  {
  console.log(this)
  console.log($scope)
  //第一种方式,通过this设置
  //this.chooseColor='red'
  //第二种是可以通过$scope设置
  $scope.chooseColor='red'
  }
  })

如果给其中的choose的function传递了一个事件参数e则使用this.chooseColor=e.target.innerHTML来得到传递的值

如果给其中的choose的function传递了一个字符串e则使用this.chooseColor=e;来得到传递的值(实际编程中因为后台传递的值不确定性一般不这么写)

通常为了适应后台传递的值采用传递对象的方法即,<button ng-click="choose(colors[1])">{{colors[1]}}</button>

注意其中colors[1]不加单引号当做对象传递如果加了单引号则当做字符串传递

ng-show表示是否显示元素

true显示元素

false隐藏元素

ng-hide表示是否隐藏元素

true表示隐藏元素

false表示显示元素

通过ng-bind隐藏页面一开始加载时就显示的字符串需要在ng-bind中传递的时候加上‘’否则会被ng-bind识别成变量

ng-hide与ng-show是通过添加class风格实现显隐的

插值表达式

Angular可以对插如的数据执行js表达式,例如:运算,方法

运算中乘除大于加减,当字符串与乘除运算时字符串与数学运算表达式属于同一层级,但字符串遵循拼接原则

可以将$scope中定义的字符串从小写转为大写,css提供的方法为msg.toUpperCase()就可以将字符串从小写转为大写

插值时使用的表达式不能复用,因此可以通过插值过滤器来帮我们实现

json将对象转化成json字符串

实例:

<body ng-app="myApp" ng-init="">
  <div class="main" ng-controller="myCtrl">
  <h1>{{obj | json}}</h1>
  </div>

<script type="text/javascript">
  var app=angular.module('myApp',[])
  app.controller('myCtrl',function($scope){
  //有个宽度和高度
  $scope.obj={
  red:"红色",
  greed:"绿色"
  }
  })
  </script>

效果为:

过滤器语法{{ 对象 | 过滤器}},如:{{msg | json}}

Angular中过滤器(可在Angular.js中搜索到)


数组过滤器fliter

在Angular中叫filter接收参数有三种方式

1.传递一个字符串表示过滤的字段

2.传递一个变量,变量是在作用域中定义的字段

3.传递一个函数,当每次执行过滤的时候,会执行该函数,函数的返回值就是过滤的条件

{

作用域是全局作用域

三个参数

第一个参数是遍历的数组成员值

第二个参数是成员索引值

第三个参数是原数组

}

在过滤器中传递参数时,参数前面一定要加上:即{{colors | filter:'e'}}

Date过滤器

是格式化时间的过滤器,这个过滤器很强大,我们看到的所有页面的时间日期格式都可以通过这个过滤器表达出来(中文的星期是格式化不出来的)。

过滤器的参数是格式化的模板

模板中的Y表示年,M表示月,d表示日,E表示星期,h表示小时,m表示分钟,s表示秒(记不住可以直接在Angular中搜索date过滤器注释中有告诉语法怎么用)

设置自定义的时间模板的Angularjs代码

var app=angular.module('myApp',[])
  app.controller('myCtrl',function($scope){
  //创建一个时间
  $scope.date=new Date();
  })
  var date=new Date();
  var tpl='yy,*_* MM @_@ d';
  var result=tpl.replace(/(y{1,4})[^yMd]*(M{1,2})[^yMd]*(d{1,2})/g,function(match,$1,$2,$3){
  var m=date.getMonth()+1;
  var d=date.getDate();
  //y的长度是几就保留年份的几位数
  return match.replace($1,date.getFullYear().toString().slice(4-$1.length))
  //处理月份
  .replace($2,$2.length===1?m:(
  date.getMonth().toString().length===1?'0' + m:m
  ))
  .replace($3,$3.length===1?d:(
  d.toString().length===1?'0'+d:d
  ))
  });
  console.log(result)

字符串操作的过滤器

uppercase将字符串做大写转换

lowercase将字符串做小写转化

limitTo对字符串或字符串数组做截取操作

参数表示截取长度(slice(0,参数))

数字操作的过滤器

讲一个数转化成一种可读性很强的格式,对于整数部分,每三位加一个,对小数做截取

参数就是小数位数的截取长度(默认保留三位小数,给filter传数字会根据数字参数选定四舍五入保留的位数)

截取的最后一位会做四舍五入

{{num|number:6}}

结果

123,456.141593

数组过滤器

orderBy排序过滤器

接受两个参数

第一个参数表示排序的字段

第二个参数表示正序还是倒序

true 倒序

false 正序(默认)

如果排序是数字,直接比较数字大小

如果排序是字符串,根据字符所在编码进行排序

应用程序app有个方法filter,这个方法就是用来定义过滤器的

第一个参数过滤器的名称

第二个参数式过滤器的处理函数

Angular的过滤函数的返回值是一个函数,这个函数才是真正处理插值数据的函数

这个处理插值的函数它的返回值才是渲染到页面的数据

第一级函数,在一生中只执行一次

没有参数

作用域是一个空对象

第二级函数,在每一次绑定的时候数据如果变化都会执行一次

参数

第一个参数是插值数据

从第二个参数开始表示过滤器使用时候传递的参数,并一一对应

作用域是全局作用域

返回值就是处理后要渲染到页面中的数据

多个过滤器可以同时使用如,<h1>{{msg | toCamel | lowercase}}</h1>(其中toCame是自定义过滤器)

如果使用多个过滤器,则前一个的输出会作为后一个的输入

猜你喜欢

转载自blog.csdn.net/qq_31404603/article/details/53140045