AngularJS 过滤器\自定义过滤器 $filter

最新推荐文章于 2021-12-20 10:03:00 发布

置顶 MoveLikeRabbit

最新推荐文章于 2021-12-20 10:03:00 发布

阅读量497

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/MoveLikeRabbit/article/details/78029303

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

【AngularJS】—— 内置过滤器

1、uppercase，lowercase 大小写转换

{{ "lower cap string" | uppercase }}   // => LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // => tank is good "lower cap string" | uppercase }}   // => LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // => tank is good

2、date 格式化

{{1505806263365 | date:"yyyy-MM-dd EEE hh:mm:ss"}} // => 2017-09-19 Tue 03:27:34}}
date过滤器可以吧 new Date() 用getTime()得到的时间戳 或者其他形式的 timestamp 转化成你想要的时间格式
y 表示年份 yy | yyyy
M 表示月份 
d 表示日期
E 表示星期 EEE(缩写) | EEEE 
h 表示小时 HH(24小时制) | hh(12小时制)
m 表示分钟
s 表示1505806263365 | date:"yyyy-MM-dd EEE hh:mm:ss"}} // => 2017-09-19 Tue 03:27:34}}
date过滤器可以吧 new Date() 用getTime()得到的时间戳 或者其他形式的 timestamp 转化成你想要的时间格式
y 表示年份 yy | yyyy
M 表示月份 
d 表示日期
E 表示星期 EEE(缩写) | EEEE 
h 表示小时 HH(24小时制) | hh(12小时制)
m 表示分钟
s 表示

3、number 格式化（保留小数）

{{1234567.123456 | number:2}} // =>1,234,456.12
为数字加上千位分隔符，可以接收一个参数 指定float型保留几位小数1234567.123456 | number:2}} // =>1,234,456.12
为数字加上千位分隔符，可以接收一个参数 指定float型保留几位小数

4、currency货币格式化

{{ 250 | currency }}            // => $250.00
{{ 250 | currency:"RMB ￥ " }}  // => RMB ￥ 250.00
{{ 250.9999 | currency:"￥":2 }} // => ￥ 250.99 250 | currency }}            // => $250.00
{{ 250 | currency:"RMB ￥ " }}  // => RMB ￥ 250.00
{{ 250.9999 | currency:"￥":2 }} // => ￥ 250.99

5、filter查找

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集

 // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}        // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}

6、limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

 // 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}

【AngularJS】—— 自定义过滤器

除了内置的9个过滤器，我们还可以自定义过滤器

	//这个过滤器将首字母变成大写
	app.filter('fitstUppercase',function(){
		return function(str){
			if(str){
				return str[0].toUpperCase()+str.slice(1);
			}
		}
	})
	//这个过滤器将超出长度的字符串隐藏，num(字符串长度) symbol(替代隐藏部分的符号)
	app.filter('cutString',function(){
		return function(str,num=5,symbol="..."){
			if(str){
				return str.slice(0, num)+(str.length>num?symbol:'');
			}	
		}
	})
	//跟上面的过滤器实现的功能一样，但是用了内置的过滤器来实现
	app.filter('myfilter',function($filter){
		return function(str,num=5,symbol="..."){
			if(str){
				return $filter('limitTo')(str,num)+(str.length>num?symbol:'');
			}
			
		}
	})

不知道大家有没有发现，这几个自定义的过滤器，我都会先去验证一下 传入的第一个参数
也就是我们要过滤的内容 str 是否为真，如果我们这样的场景下 使用上面的过滤器
	<div ng-app="myApp"> 
	   <input type="text" ng-model="a">
		<p>超出隐藏：{{a | cutString}}</p>
		<p>首字母大写：{{a | fitstUppercase}}</p>
		<p>{{1234567.123456  | number:2}} </p>
	    </div>

当input 还没有输入值的时候，如果不去判断 str 是否传入了数值，就会报错
那为什么不给str一个默认值来解决呢？自己动手测试一下，当你把input的值删掉又会出现同样的问题了
这时你会发现用内置的过滤器这样做并没有问题，
哇塞！我们用if(str)把我们写的过滤器变得像内置的一样好用了 
正在上传…
取消

//下面贴出完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="angular.min.js">
    自行引入个
  </script>
</head>
<script>
  var app = angular.module('myFilter', []);
  app.filter('fitstUppercase', function () {
    return function (str) {
      if (str) {
        return str[0].toUpperCase() + str.slice(1);
      }
    }
  }) 
  app.filter('myfilter', function ($filter) {
    return function (str, num = 5, symbol = "...") {
      if (str) {
        return $filter('limitTo')(str, num) + (str.length > num ? symbol : '');
      }
    }
  }) 
  app.filter('cutString', function () {
    return function (str, num = 5, symbol = "...") {
      if (str) {
        return str.slice(0, num) + (str.length > num ? symbol : '');
      }
    }
  })
</script>

<body>
  <div ng-app="myFilter">  <input type="text" ng-model="a">
    <p>超出隐藏：{{a | cutString}}</p>
    <p>首字母大写：{{a | fitstUppercase}}</p>
  </div>
</body>

</html>

MoveLikeRabbit

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 过滤器\自定义过滤器 $filter

【AngularJS】—— 内置过滤器 QyizosQyi***@163.com1、uppercase，lowercase 大小写转换{{ "lower cap string" | uppercase }} // => LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} /
复制链接

扫一扫