前端讲义63_AngularJS 内置过滤器应用

木生火

于 2019-06-07 20:56:59 发布

阅读量179

点赞数

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/91142286

版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍AngularJS中各种内置过滤器的使用方法，包括limitTo、lowercase、uppercase、json、currency、date、filter、number和orderBy。通过实例演示如何处理数组、字符串、日期、数字及排序，为开发者提供全面的AngularJS过滤器指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、limitTo（限制数组长度或字符串长度）：截取数组或者字符串的长度，如果值为负数，从数组或者字符串的尾部开始截取。

 //截取数组arr的前四位，以数组的形式返回 
 <li>{{arr|limitTo:'4'}}</li>
//截取数组arr的最后四位，以数组的形式返回     
 <li>{{arr|limitTo:'-4'}}</li>

2、lowercase（小写格式）：把字母全部转化成小写的形式
<li>{{da|lowercase}}</li>
3、uppercase（大写格式）：把字母全部转化成大写的形式
4、json（格式化json对象）：把一个js对象格式化为json字符串
{{ jsonObject | json}}
5、currency（货币处理）: 将数字格式转化为货币的形式，默认为$。

<body >
<div ng-app="mshApp" >
	<div ng-controller="numberCtrl">
	商品价格：<input type="text" ng-model="price"><p>
	默认格式：{{price | number:2}}<p>
	保留小数点后2位：{{price | number:2}}<p>
	不保留小数部分：{{price | number:0}}<p>
	保留小数点后4位：{{price | number:4}}<p>
	默认货币：{{price | currency}}<p>
	美国货币：{{price | currency:"USD$"}}<p>
	中国货币（不保留小数）：{{price | currency:"RMB￥": 0}}<p>
	</div>
</div>
<script>
var app = angular.module("mshApp", []);
app.controller("numberCtrl" , function(){
});
</script>
</body>

6、date（日期格式化）:满足一般的时间格式要求。

//展现形式为：年-月-日 时：分：秒 星期
{{date|date:'y-m-d h:m:s EEEE'}} 

//案例应用，在ng-bind指令中使用过滤器

<body>
<div ng-app="mshApp" ng-controller="dateCtrl">
 日期：<input type="datetime-local" ng-model="myDate"/><p>
<span ng-bind="myDate | date"></span><p>
<span ng-bind="myDate | date: 'yyyy年MM月dd日'"></span><p>	
<span ng-bind="myDate | date: 'yyyy年MM月dd日 HH时mm分'"></span><p>
</div>	

<script type="text/javascript">
var app = angular.module("mshApp", []);
app.controller("dateCtrl" , function($scope){
});
</script>
</body>

7、filter（匹配字符串）：挑选出数组中含有的所选中的子串元素，作为子数组来返回。
$scope.arr = ["Monday","Tuesday","星期三","星期四","周五","周六"];
<li>{{arr|filter:'d'}}</li> 展现数组中含有字母“d”
<li>{{arr|filter:'周'}}</li> 展现有汉子“周”的元素
8、number（格式化数字）：把一串数字进行千位的分位，如123,456,789。可指定float类型保留几位小数。
<li>{{num|number:2}}</li> 保留小数点后两位。
9、orderBy（排序）：将数组中的元素进行排序

$scope.arr = [
            {name : '老孙',age : 500},
            {name : '二师兄',age : 300},
            {name : '三师弟',age : 200},
            {name : '白龙马',age : 100},
           ]
<li>{{arr|orderBy:'age':true|json}}</li> 以age的从大到小进行排序。