在开发中,经常会遇到这样的场景

如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来;

如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍;

买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品;

以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,AngularJS的filter就是用来做这个事的。

内置过滤器

AngularJS内置了很多过滤器,在HTML模板的绑定符号{{}}内通过|来调用过滤器

如字母转换成大写:$scope.name='wangmeijian'

{{name | uppercase}}   // 输出 WANGMEIJIAN

数字转成千分位写法:$scope.num = 12345678

{{num | number}} // 输出 12,345,678

日期格式化:$scope.date=new Date()

{{date | date:'yy-MM-dd'}}   // 输出 2015-11-19

数字格式化成货币:$scope.num=987654321

{{num | currency:'¥'}}   // 输出 ¥987,654,321.00

demo戳这里

稍微复杂一点的过滤器——‘filter’,可以返回给定数组的子集,它接收一个参数,这个参数可以是字符串、对象、函数

字符串:返回所有包含这个字符串的元素,想要返回不包含这个字符串的元素则在前面加!

demo:

{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']

对象:Angular会将待过滤对象的属性与这个对象中的同名属性进行比较,如果属性值是字符串会判断是否包含该字符串(注意这里是包含,并不需要完全相等)

demo:

{{ [
{
name: 'wangmeijian',
sex: 'boy'
},
{
name: 'bokeyuan',
sex: 'sex'
}
] | filter:{
sex: 'bo'
    }
}}

// 输出 [{"name":"wangmeijian","sex":"boy"}]

函数:对每个元素都执行该函数,返回非假值的元素会出现在新的数组中并返回

demo:

$scope.getNumber = function(n){
  return !isNaN(n);
}

{{ ['demo',2,3] | filter:getNumber}}  // 输出 [2,3]

自定义过滤器

当内置函数不能满足你的业务需求时,就需要自定义一个过滤器,自定义过滤器返回一个函数,函数的参数就是HTML模板中|左侧的数据,它会自动传入过滤器中

比如需求是将一句话中的每个单词首字母变成大写

<html ng-app='app'>
<head>
<title>AngularJS过滤器filter入门</title>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script>
</head>
<body ng-controller='myController'>
<p>{{ str | capitalize}}</p>
<!-- 输出 Hello, Welcome To Bokeyuan! -->
<script type="text/javascript">
var app = angular.module('app',[])
.controller('myController',['$scope', function($scope){
$scope.str = 'hello, welcome to bokeyuan!'
}])
.filter('capitalize', function(){
return function(str){
var arr = str.split(/\s+/);
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
};
return arr.join(" ")
}
})
</script>
</body>
</html>

需要注意的是,内置过滤器‘filter’的参数是函数时,会对数组的每个元素执行该函数,自定义过滤器是对数组对象执行它return的函数。

作者:古德God
出处:http://www.cnblogs.com/wangmeijian

本文版权归作者和博客园所有,欢迎转载,转载请标明出处。

如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

AngularJS过滤器filter入门的更多相关文章

  1. AngularJS 过滤器 Filter

    过滤器实质是数据转换或过滤,把ViewMode中的数据转化成View层用户友好的信息.可以看做一个函数,负责接收输入,转换成输出,每次参数变化时,它就被执行,输出被视图View使用. 一.基本定义及其 ...

  2. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  3. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  4. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  5. 【angularJS】Filter 过滤器

    当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...

  6. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

  7. AngularJS 笔记系列(五)过滤器 filter

    过滤器是用来格式化给用户展示的数据的. 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器. 大写:{{ name | uppercase }} 也可以在 JS 中进行调用$filter ...

  8. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  9. AngularJS过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...

随机推荐

  1. bzoj3114 LCM Pair Sum

    题意:以质因数分解的方式给定n,求所有满足:lcm(a, b) = n的无序数对的价值和.其中(a, b)的价值为a + b 解: 定义首项为a,公比为q,项数为n的等比数列的和为getQ(a, q, ...

  2. 【POJ3171】Cleaning Shifts 带权区间最小覆盖

    题目大意:给定一个长度为 N 的序列,求带权区间最小覆盖. 题解:设 \(dp[i]\) 表示从左端点到 i 的最小权值是多少,则状态转移为:\(dp[e[i].ed]=min\{dp[j],j\in ...

  3. 如何把手机app的视频下载到手机上?网页上的视频怎么下载?

    手机上小视频怎么下载?求推荐不需要安装软件的下载方法? 如何把手机app的视频下载到手机上?比如把快手上的视频下载到手机上? 如何免费下载视频? ... 答案当然是用iiiLab提供的在线视频解析下载 ...

  4. bzoj千题计划230:bzoj3205: [Apio2013]机器人

    http://www.lydsy.com/JudgeOnline/problem.php?id=3205 历时一天,老子终于把它A了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 因为不懂spfa ...

  5. dedecms织梦自增索引标签

    在列表中我们经常会需要动态的索引值,那么就可以用到如下标签 [field:global.autoindex/] 默认是从1开始,如果我们想从0或者从其他数开始如下: [field:autoindex ...

  6. H5 Day1 练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ubuntu 环境下pycharm的 安装与激活教程 以及错误解决方法

    1. 基本安装: 1.1 打开Ubuntu的应用市场,并在搜索栏搜索pycharm,结果如下图所示 1.2 选择pro版本进行安装,结果如下图所示: 1.3打开安装后的pycharm,如果出现下图所示 ...

  8. 按esc键 关闭模态框

    <!-- help start --> <div class="modal fade" id="myModal" tabindex=" ...

  9. Dream Spark ------spark on yarn ,yarn的配置

    <?xml version="1.0"?> <!-- Licensed under the Apache License, Version 2.0 (the &q ...

  10. MYSQL问题解决

    1. MySQL错误日志里出现: 140331 10:08:18 [ERROR] Error reading master configuration 140331 10:08:18 [ERROR] ...