AngularJS过滤器filter用法分析  更新时间:2016年12月11日 11:38:47   作者:wangmeijian   这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的功能、分类、使用方法与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下: 在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为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示例: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模板中|左侧的数据,它会自动传入过滤器中 比如需求是将一句话中的每个单词首字母变成大写 AngularJS过滤器filter入门 {{ str | capitalize}} 需要注意的是,内置过滤器‘filter’的参数是函数时,会对数组的每个元素执行该函数,自定义过滤器是对数组对象执行它return的函数。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS的内置过滤器详解 AngularJS中的过滤器filter用法完全解析 详解AngularJS中自定义过滤器 AngularJS中的过滤器使用详解 使用AngularJS创建自定义的过滤器的方法 详解AngularJS过滤器的使用 AngularJS 过滤器(自带和自建)详解 angularjs过滤器–filter与ng-repeat配合有奇效 AngularJS 过滤器的简单实例 详解AngularJS验证、过滤器、指令 AngularJS常见过滤器用法实例总结 Angularjs过滤器实现动态搜索与排序功能示例 AngularJS 过滤器 filter 相关文章 Angular6 发送手机验证码按钮倒计时效果实现方法 这篇文章主要介绍了Angular6 发送手机验证码按钮倒计时效果实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-01-01 AngularJS实现单一页面内设置跳转路由的方法 这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下 2017-06-06 Angular开发者指南之入门介绍 本篇文章主要介绍了Angular开发者指南的入门知识,具有很好的参考价值。下面跟着小编一起来看下吧 2017-03-03 Angularjs自定义指令Directive详解 Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧 2017-05-05 举例讲解AngularJS中的模块 这篇文章主要介绍了AngularJS中的模块,文中讲到了其应用模块和控制器模块的例子,需要的朋友可以参考下 2015-06-06 详解Angular6.0使用路由步骤(共7步) 这篇文章主要介绍了详解Angular6.0使用路由步骤(共7步),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-06-06 Angular 4 指令快速入门教程 本篇文章主要介绍了Angular 4 指令快速入门教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 angularJs的ng-class切换class 这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS入门教程之ng-checked 指令详解 本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下 2016-08-08 Angular下H5上传图片的方法(可多张上传) 本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下Angular下H5上传图片的方法(可多张上传),非常不错,需要的朋友参考下 2017-01-01 最新评论

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

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

如用户的性别分为“男”和“女”,在数据库中保存的值为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示例: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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

您可能感兴趣的文章:

  • AngularJS的内置过滤器详解
  • AngularJS中的过滤器filter用法完全解析
  • 详解AngularJS中自定义过滤器
  • AngularJS中的过滤器使用详解
  • 使用AngularJS创建自定义的过滤器的方法
  • 详解AngularJS过滤器的使用
  • AngularJS 过滤器(自带和自建)详解
  • angularjs过滤器–filter与ng-repeat配合有奇效
  • AngularJS 过滤器的简单实例
  • 详解AngularJS验证、过滤器、指令
  • AngularJS常见过滤器用法实例总结
  • Angularjs过滤器实现动态搜索与排序功能示例
张贴在3