angular————过滤器

发表于

  1. 过滤器

    • 过滤器的作用是输出经过过滤后的数据
    • 过滤器分为内置过滤器与自定义过滤器

    • 过滤器有3种使用方法

      1. 在表达式中使用 其中|是分隔符 :后面进行传参

        1
        {{name|currency:'￥'}}

      2. 控制器中注入$filter服务

        1
        2
        3
        4
        mod.controller('ctrl',function  ($scope,$filter) {
        	$scope.name='aaaaabbbbdddd';
        	$scope.name=$filter('uppercase')($scope.name);
        })

      3. 过滤器的名字+Filter(如：uppercaseFilter) 如：$filter(‘过滤器名称’)(数据)

        1
        2
        3
        4
        mod.controller('ctrl',function  ($scope,uppercaseFilter) {
        	$scope.name='aaaaabbbbdddd';
        	$scope.name=uppercaseFilter($scope.name);
        })

    • 常见内置过滤器

      1. currency 货币过滤器 如果不传参默认是$，也可以自己传递参数

      2. uppercase lowercase 大小写过滤器

      3. number 限制数字后面小数点位数

      4. limitTo 用来限制字符串、数组的长度

      5. json 把普通对象转换为JSON对象

      6. date 转换时间格式

      7. filter 根据条件过滤数组，将过滤后的内容以一个新数组返回
        -参数1 可以是字符串，也可以是一个方法,根据返回值进行过滤
        -参数2 true严格匹配，false不区分大小写，非严格匹配，默认false
      8. orderBy 数组实现排序，将排序后的数组返回
        -参数1 可以是字符串，按照哪一项来排序
        -参数2 true 倒序，false 正序 默认正序
    • 如何生成自定义过滤器
      • 参数1 过滤器的名字
      • 参数2 函数(定义过滤器的方法)
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        //返回前len项为大写的值的过滤器
        mod.filter('newF',function  () {
        		// 参数1: input就是要使用该过滤器的数据
        		// 从第二个参数开始就是冒号后面传递的参数
        	return function  (input,len) {
        		var a=input.slice(0,len);
        		a=angular.uppercase(a);
        		var b=input.slice(len);
        		return a+b;
        	}
        })
        //数组去重的过滤器
        mod.filter('newF',function  () {
        	return function  (input,len) {
        		var newarr=[];
        		for (var i=0;i<input.length;i++) {
        			if (newarr.indexOf(input[i])===-1) {
        				newarr.push(input[i]);
        			}
        			
        		}
        	return newarr;	
        	}
        })