AngularJS过滤器

最新推荐文章于 2021-03-25 09:35:17 发布

learning_ever

最新推荐文章于 2021-03-25 09:35:17 发布

阅读量251

点赞数

分类专栏：前端，框架，过滤器文章标签： AngularJS 内置过滤器自定义过滤器前端 filter

本文链接：https://blog.csdn.net/learning_ever/article/details/70877797

版权

前端，框架，过滤器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS的filter，中文名“过滤器”是用来过滤变量的值，在页面中渲染出我们自己想要的结果，今天我们来说说AngularJS中的filter过滤器吧.....

一、filter简介

filter指格式化数据，其语法：

{{expression | filter }}    ==>   {{表达式 | 过滤器}}

带有参数的语法：

{{expression | filter:argument1:argument2:argument3:.....}}

filter后面位参数列表，多个参数之间有冒号隔开。

二、AngularJS内置的filter

AngularJS的内置过滤器分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy

下面我们说说几个比较常用的：

1.子浮串大小写转换过滤器(uppercase|lowercase)：

<div ng-bind="name | uppercase"></div>
 <div ng-bind="name | lowercase"></div>

//js代码
var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
      $scope.name = ""John Smith""
}

上述代码中uppercase意思为“John Smith”字母全部为大写，而lowercase的意思为“ John Smith”字母全为小写。

2.长度限制过滤器(limitTo)：

长度：<input type="text" ng-model="length"><br />
        位置：<input type="text" ng-model="index">
        <br />
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>

上述代码中的"limitTo:length:index"其中index值得是截取的长度，从最前面第一个字符开始截取。

3.时间过滤器（date）：

 <div>
     日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
      y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
      <br />
      <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />
      <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />
      <span ng-bind="date | date:'hh:mm:ss'"></span><br />
 </div>

4.货币格式过滤器（currency）：

<div>
      <p>
         对于要展示的货币数据【原始数据就是数字】
         按照指定的货币格式进行输出
       </p>
       货币过滤器输出：<span ng-bind="price | currency"></span><br />
       货币过滤器输出：<span ng-bind="price | currency:'人命币￥'"></span><br />
       货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br />
</div>

5.JSON过滤器（json）：

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

<span ng-bind="users|json"></span>

可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }

6.排序过滤器（orderBy）：

<div>
     <h3>排序输出</h3>
      排序关键词：<input type="text" ng-model="keyword">
      排序顺序：<input type="checkbox" ng-model="sort">倒序
     <br />
     <ul>
         <li ng-repeat="u in users | orderBy:keyword:sort">
            <span ng-bind="u.userID"></span>****
            <span ng-bind="u.username"></span>****
            <span ng-bind="u.nickname"></span>
         </li>
     </ul>
</div>

“orderBy:keyword”:即通过关键字排序“sort”为倒序，也可以通过关键字来进行筛选。

三、自定义过滤器

用简单的案例来了解一下自定义过滤器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    <div ng-bind="name"></div>
    <div ng-bind="name | myfilter"></div> <!-- myfilter为自定义过滤器的名字-->
    <div ng-bind="name | myfilter1"></div>
</div>
<script>
    var app = angular.module("myApp",[]);
    app.filter("myfilter",function(){
        return function(value){
            value = value.toUpperCase();//渲染的内容为大写字母
            return value;//返回值
        }
    });
    app.filter("myfilter1",function(){
        return function(value){
            value = value.toLowerCase();//渲染的内容为小写字母
            return value;
        }
    });
    app.controller("myCtrl",function($scope){
        $scope.name = "jerry Smiht";
    })
</script>
</body>
</html>

下面用一张图来更加形象的说明自定义函数的运行过程