AngularJS过滤器filter用法分析


Posted in Javascript onDecember 11, 2016

本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下:

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

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

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

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

AngularJS过滤器filter用法分析

以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,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示例:http://runjs.cn/code/ztgq7fwg

稍微复杂一点的过滤器——‘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的函数

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JavaScript门道之标准库
May 26 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 #Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 #Javascript
利用JS判断鼠标移入元素的方向
Dec 11 #Javascript
实现JavaScript高性能的数据存储
Dec 11 #Javascript
探索Javascript中this的奥秘
Dec 11 #Javascript
实例浅析js的this
Dec 11 #Javascript
解析js如何获取css样式
Dec 11 #Javascript
You might like
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
dojo 之基础篇
2007/03/24 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Python字符编码判断方法分析
2016/07/01 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
django中嵌套的try-except实例
2020/05/21 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
酒店保安员岗位职责
2014/01/31 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
电子专业求职信
2014/06/19 职场文书
财务统计员岗位职责
2015/04/14 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技