AngularJS之过滤器篇

最新推荐文章于 2021-03-27 13:57:27 发布

扶苏小锦鲤

最新推荐文章于 2021-03-27 13:57:27 发布

阅读量305

点赞数

文章标签：过滤器 angularjs 数据

本文链接：https://blog.csdn.net/mm825474872/article/details/70885299

版权

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己定义过滤器。过滤器可以使用一个管道字符（|）添加到表达式和指令中。
一、uppercase 过滤器将字符串格式化为大写，lowercase 过滤器将字符串格式化为小写：

 <div>
        <h3>字符串大小写转换过滤器</h3>
        <div ng-bind="name"></div>
        <div ng-bind="name | uppercase"></div>
        <div ng-bind="name | lowercase"></div>
    </div>

二、.currecy过滤器可以将一个数值格式化为货币格式。用{{ 50| currecy }}来将50转化成货币格式。currecy过滤器允许我们自己设置货币符号或者设置保留小数的位数。

   <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>

三、date过滤器可以将日期格式化成需要的格式。通常情况下，需要按照用户的要求进行输出，这时候就会附带参数 y/M/d/h/m/s/E 年/月/日/时/分/秒/星期

        <div>
            <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span>
            <span ng-bind="date | date:'yyyy年MM月dd日'"></span>
            <span ng-bind="date | date:'hh:mm:ss'"></span>
        </div>

四、 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>

五、limitTo过滤器会根据传入的参数生成一个新的数组或字符串，可以通过参数定义截取的长度和从哪里开始截取的位置

   <div>
        <h3>长度限制过滤器</h3>
        长度：<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>
    </div>

六、json过滤器把数据中的对象，转换成JSON字符串的格式输出展示到页面上

    <div>
        <h3>JSON过滤器</h3>
        <span ng-bind="users|json"></span>
    </div>

七、 filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

<div>
        <h3>过滤输出</h3>
        关键词：<input type="text" ng-model="keyword">
        <br />
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID"></span>
                <span ng-bind="u.username"></span>
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>

八、自定义过滤器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>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>
</div>
<script>
    var app = angular.module("myApp", []);
    /*app.filter(name, fn):用于定义一个自定义过滤器
     * name:过滤器名称
     * fn:过滤器处理函数
     * */
    app.filter("myfilter", function() {
        /*
         * 过滤器中，直接return function(value) {}
         * 通过闭包函数来实现数据处理，固定语法结构！
         * value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据
         */
        return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
            /*
             * 这一部分主要是用来进行数据处理的
             */
            value = value.toUpperCase();
            /* 过滤器中数据处理完成，一定要返回输出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</script>
</body>
</html>