当前位置：首页 > 资讯 > 技术文档

AngularJS过滤器filter用法分析

时间：2021-06-16 01:23 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS过滤器filter用法分析

本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考，具体如下：在开发中，经常会遇到这样的场景如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女”再显示出来；如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品； [img]http://files.jb51.net/file_images/article/201612/20161211114633898.png?20161111114928[/img] 以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，AngularJS的filter就是用来做这个事的。 [b]内置过滤器[/b] 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]

[b]自定义过滤器[/b] 当内置函数不能满足你的业务需求时，就需要自定义一个过滤器，自定义过滤器返回一个函数，函数的参数就是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相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/893.htm]AngularJS入门与进阶教程[/url]》及《[url=http://www.1sucai.cn/Special/898.htm]AngularJS MVC架构总结[/url]》希望本文所述对大家AngularJS程序设计有所帮助。

全部评论(0)

上一篇：Angularjs 动态改变title标题(兼容ios)
下一篇：AngularJS实现controller控制器间共享数据的方法示例

资讯排行榜
更多>>