Angular快速入门---过滤器篇

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

宋小草

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

阅读量571

点赞数

分类专栏： angularjs javascript 前端框架文章标签： angularjs angular

本文链接：https://blog.csdn.net/songchuncao/article/details/70876712

版权

angularjs 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

前端框架

6 篇文章 0 订阅

订阅专栏

本文介绍了在数据输出时，如何使用Angular过滤器来达到预期的效果，替代直接输出或简单拼接。通过实例讲解了Angular过滤器的使用方法。

摘要由CSDN通过智能技术生成

在数据输出的时候，原始的输出数据的方式是直接输出，或者通过拼接进行，但是这些在某些项目的使用中输出的结果不是我们想要的，那么怎么解决这一问题呢？我们可以通过Angular过滤器来实现我们想要的。过滤器怎么使用呢？我们来一一道来。

货币格式过滤器——currency

currency后面可以不带参数，也可带参数，第一个参数是你要显示的字符串，第二个参数是小数点后面有几位。

代码

<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">
        <h3>货币过滤器</h3>
        <div>  原始输出数据的方式： <span ng-bind="price"></span></div>
        <div>通过拼接输出数据的方式：￥ <span ng-bind="price"></span>.00</div>
         <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>
    </div>
</body>
<script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope",function ($scope) {
        $scope.price = 12;
    }]);
</script>
</html>

输出结果：

日期时间过滤器：date

代码：

<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">
    <h3>日期时间过滤器</h3>
    <div>
        原始输出： <span ng-bind="date"></span>
    </div>
    <div>
        日期格式化： <span ng-bind="date | date"></span>
    </div>
    <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>
</div>
</body>
<script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope",function ($scope) {
        $scope.date = new Date();
    }]);
</script>
</html>

结果：

长度限制过滤器：limitTo

从源数组或字符串进行截取，同Javascript的中的substr有点雷同

limitTo参数：length,index。

length:截取数组或字符串的长度

index:下标，从什么位置开始截取，默认0

与html绑定

<div ng-controller="myCtrl">
    <h3>长度限制过滤器</h3>
    <div>
        长度： <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>
</div>

script

var app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope",function ($scope) {
        $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            {userID:5, username:"linjingyu", nickname:"林惊羽"},
            {userID:6, username:"cengshushu", nickname:"曾书书"},
            {userID:7, username:"zhuque", nickname:"朱雀"},
            {userID:8, username:"qinglong", nickname:"青龙"},
            {userID:9, username:"guiwang", nickname:"鬼王"},
            {userID:10, username:"dushen", nickname:"赌神"},
            {userID:11, username:"jinpiner", nickname:"金瓶儿"}
        ];
    }]);

结果

JSON过滤器：

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

用于代码程序调试，使用较少！

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

字符串大小写转换

uppercase将字符串转换成大写

lowercase将字符串转换成小写
<div ng-bind="name | lowercase"></div>

排序输出过滤器：orderBy

keyword通过关键字搜索出来的结果进行排序

sort对数组进行反向排序

排序关键词：<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>