AngularJS-filter过滤器详解（包含自定义）

最新推荐文章于 2021-03-17 16:03:43 发布

有梦的小草

最新推荐文章于 2021-03-17 16:03:43 发布

阅读量1.2k

点赞数

分类专栏： AngularJS 文章标签： AngularJS AngularJS过滤器filter详解 AngularJS-自定义过滤器

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/86499097

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AngularJS: API: ng/filter/filter

filter：从array中选择一个条目子集，并作为一个新数组返回。

用法

用于HTML模板绑定

{{ filter_expression | filter : expression : comparator}}

用于JavaScript

$filter('filter')(array, expression, comparator)

参数

orderBy：通过expression来排序指定的数组

字符串按字母的顺序排序，数字按照大小排序。注意：如果你发现数字没有正确排序，请确认他们保存的是数字而不是字符串。

模版：

ng-repeat（重要）:用来将数据集合按照指定的形式重复渲染出来
<table>
  <tr>
    <th>名称</th>
    <th>电话</th>
  </tr>
  <!--使用ng-repeat指令渲染所有的朋友数据-->
  <tr ng-repeat="friend in friends">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>

自定义过滤器：

过滤器属于服务（service）的一种，类似controller，可以自定义实现所需的过滤功能，称为自定义过滤器。

定义方式如下：

angular.module(‘app’,[]).filter(‘capitalize’,function(){
	return function(input){
		....
	}
})

代码实例

<!DOCTYPE html>
<html ng-app="filter">
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/angular-csp.css"/>
  <title>过滤器的使用</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-controller="filterController">
<div class="container" style="padding:100px;">
  <!--过滤器filter的用法-->
  <h2>过滤器filter的用法</h2>
  <lu class="nav nav-tabs">
    <li>输入查询内容<input type="text" ng-model="search" placeholder="任意字段" /></li>
    <li>输入查询内容<input type="text" ng-model="search.name" placeholder="搜索名字" /></li>
    <li>输入查询内容<input type="text" ng-model="search.phone" placeholder="搜索电话" /></li>
    <li>是否严格查询<input type="checkbox" ng-model="strict" placeholder="严格查询" /></li>
  </lu>
  <table class="table table-bordered table-hover">
      <tr>
      <!--过滤器orderBy的使用-->
        <th><a href="javascript:void(0)" ng-click="reverse=!reverse;order('name',reverse)">名称</a></th>
        <th><a href="javascript:void(0)" ng-click="reverse=!reverse;order('phone',reverse)">电话</a></th>
      </tr>
    <!--使用ng-repeat指令渲染所有的朋友数据(相当于for循环)
    filter:筛选过滤
    -->
      <tr ng-repeat="friend in friends|filter:search:strict">
        <td>{{friend.name|capitalize}}</td>
        <td>{{friend.phone}}</td>
      </tr>
  </table>
  <!--使用自定义过滤器-->
  <h2>使用自定义过滤器,把hello第一个字母变大写</h2>
  <h4>{{'hello world'|capitalize}}</h4>
</div>
<script src="js/angular.js"></script>
<script src="js/filter.js"></script>
</body>
</html>

var app = angular.module('filter',[]);
//声明filterController
app.controller('filterController', function ($scope,$filter) {
    //声明一个数组用于演示过滤器filter的用法
    $scope.friends = [
        {name:'John',phone:'555-1234'},
        {name:'Mary',phone:'800-1234'},
        {name:'Mike',phone:'555-4321'},
        {name:'Adam',phone:'555-5678'},
        {name:'Julie',phone:'555-8765'},
        {name:'Juliette',phone:'555-3456'}
    ];
    //正序或倒序
    $scope.reverse = true;
    //排序函数
    $scope.order = function (field, reverse) {
        //$filter需要通过依赖注入才能使用
        var orderBy = $filter('orderBy');
        //排序后的结果集需要赋值给原先的结果集才能使用
        $scope.friends = orderBy($scope.friends,field,reverse);
    }

});
//自定义一个大写过滤器：可以将输入字符串的第一个字母变成大写
app.filter('capitalize', function () {
    return function (input) {
        //input就是要过滤的字符串
        //input[0]:获取索引为零的字符串
        //toUpperCase():转换成大写
        //substr(1)截取从1开始到最后的字符串
        return input[0].toUpperCase()+input.substr(1);
    }
});

显示效果：