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

来源：互联网发布：python splinter教程编辑：程序博客网时间：2024/06/05 06:39

在数据输出的时候，原始的输出数据的方式是直接输出，或者通过拼接进行，但是这些在某些项目的使用中输出的结果不是我们想要的，那么怎么解决这一问题呢？我们可以通过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>

0 0