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 相关文章推荐
setTimeout自动触发一个js的方法
Jan 15 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
小程序新版订阅消息模板消息
Dec 31 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
2006/12/14 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python 自定义装饰器实例详解
2019/07/20 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python执行时间的几种计算方法
2020/07/31 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
UDP协议功能
2013/01/06 面试题
大学生村官工作总结2015
2015/04/09 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python