AngularJS 过滤器

最新推荐文章于 2023-07-16 21:39:09 发布

小辣抓

最新推荐文章于 2023-07-16 21:39:09 发布

阅读量594

点赞数

分类专栏： javascript angularjs Javascript ！！！文章标签： angular angularjs 格式化 html

本文链接：https://blog.csdn.net/haodawang/article/details/69951336

版权

javascript 同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

Javascript ！！！

44 篇文章 3 订阅

订阅专栏

angularjs

5 篇文章 0 订阅

订阅专栏

前言

今天来把自己对AngularJS的一些认识和感悟给写下来，希望能和大家分享。

Angular的过滤器

Angular内部提供了一组过滤器，我们可以把他嵌在html里，就和angular的指令特性一样，不过这里我们需要借助的是一个 “|” 管道操作符，和stream的管道流有几分相似。
Angular内部提供了一组常用的过滤器，分别为一下几种:

1.currency 用两个小数位和一个货币符号来格式化一组数字
2.date 通过制定的格式来格式化一个时间
3.number 用指定的小数位来格式化输入
4.lowercase 将输入变为小写
5.uppercase 将输入变为大写
6.json 主要用于调试，能打印出被格式化后的json对象
7.orderBy 作用于数组的排序

以上就是比较常用的Angular内置的过滤器

除此之外，Angular还提供了一种“通用”的过滤器filter,之所以称之为通用，是因为它的名字而来的，它的名字就叫做filter。

下面可以做一个演示
拿到一组数据，然后将它用输入的数据当做索引，进行过滤

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-controller="myController">
        <table>
            <tr ng-repeat="x in arr">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./lib/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        angular.module("myApp",[])

            .controller("myController",$scope => {
                //声明一组数据
                $scope.arr = [
                    {name:'zhangsan',age:18},
                    {name:'zhagsan',age:12},
                    {name:'zngsan',age:13},
                    {name:'zhangs',age:14},
                    {name:'angsan',age:18}
                ];
            });
    </script>
</body>
</html>

显示结果如下
这里写图片描述

现在我们来加一个用于输入过滤信息的输入框,创建一个有输入过滤的动态表格

<div ng-controller="myController">
        <table>
        <input type="text" ng-model="text">
            <tr ng-repeat="x in arr | filter:text">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
            </tr>
        </table>
    </div>

稍微修改了一下controller
这样看来，我们只把input的输入内容绑定在了一个名为text的数据模型上，然后传入filter过滤器，之后，我们就可以看到，我们已经可以过滤信息了
这里写图片描述

自定义过滤器

下面我们来创建一个自定义的过滤器，用于数据分页,后台为node.js ，数据库为mongodb，数据皆从mongodb拿到的。
由于都有注释我就不一一讲解了。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .even{
            background: #dcdcdc;
        }
        .odd{
            background: transparent;
        }
    </style>
</head>
<body>
<!-- <input type="color"> -->
    <div ng-controller="myController">
        <!-- 用于选择排序方式 -->
        <select name="aaa" ng-change="printSeleState()" ng-model="orderIndex" ng-options="x.v as x.text for x in selectArr"></select>
        <!-- 过滤器 -->
        <input type="text" placeholder="请输入你要过滤的数据" ng-model="filterText" />
        <!-- 用于接受来自数据库的数据 -->
        <table>
            <tr>
                <td>name</td>
                <td>age</td>
            </tr>
            <tr ng-repeat="x in arr | filter:filterText | zzh:pageIndex:PAGE_SIZE" ng-class="{even:$even,odd:$odd}">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
            </tr>
        </table>
        <!-- 分页实现 -->
        <div>
            <button ng-click="jump($event.target)">1</button>
            <button ng-click="jump($event.target)">2</button>
            <button ng-click="jump($event.target)">3</button>
            <button ng-click="jump($event.target)">4</button>
        </div>
    </div>
    <script type="text/javascript" src="./lib/angular.min.js"></script>
    <script type="text/javascript">
        //创建模块作用域
        angular.module("myApp",[])
            //转换为大写过滤器
            .filter("zzh",() => {
                return (inputData,pageIndex,PAGE_SIZE) => {
                    try{
                        let start = pageIndex * PAGE_SIZE;
                        return inputData.slice(start,start + PAGE_SIZE);
                    }
                    catch(err){
                        // 吞并Exception
                        // console.log(err);
                    }
                }
            })


            //获取数据的service
            .factory('getData', ['$http', $http => {
                return () => {
                    return $http.get("http://localhost:9999");
                };
            }])

            //controller逻辑
            .controller('myController', ['$scope','getData','$filter',($scope,getData,$filter) => {
                //页码
                $scope.pageIndex = 0;
                //每页数目
                $scope.PAGE_SIZE = 4;
                //分页按钮点击
                $scope.jump = (obj) => {
                    $scope.pageIndex = obj.innerHTML - 1;
                }
                //获取后台mongodb数据
                getData()
                .then(obj => {
                    $scope.arr = obj.data;
                })
                .catch(err => {
                    if(err){
                        console.log("have a err in this project");
                    }
                });
            }]);
    </script>
</body>
</html>

这样，我们就创建了一个数据分页的应用

下面我们来看看效果

这里写图片描述

下面为mongodb的上的数据
这里写图片描述

小辣抓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 过滤器

前言今天来把自己对AngularJS的一些认识和感悟给写下来，希望能和大家分享。Angular的过滤器Angular内部提供了一组过滤器，我们可以把他嵌在html里，就和angular的指令特性一样，不过这里我们需要借助的是一个 “|” 管道操作符，和stream的管道流有几分相似。 Angular内部提供了一组常用的过滤器，分别为一下几种:1.currency 用两个小数位和一个货币符号来格式化
复制链接

扫一扫