hello,everybady~~~ 今天有人问我怎么使用过滤器,我就简单的做了个总结,大家一起来纠错呗~
对于正在工作的楼主来说,也觉得当时学习Angular稍稍有点头疼,知识点很多,也挺怀念那时候一心扎进代码的我们,同样也解决了不少问题
我就是有点闲不住,爱逛社区,看到很多大神都在分享自己敲代码遇到的那些坑,也决定加入这个小行列,说说最近遇到的东西~
有个初学者问我怎么使用过滤器,今天做个详细的介绍:
过滤器
AngularJS
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。
基本句法:
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
{{expression | filter }}
ng内置了一些过滤器
它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
下面就举例一一来说一下:
1 货币过滤器
<div>
原始输出方式:<span ng-bind="price"></span>
</div>
<div>
通过拼接输出数据的方式:¥<span ng-bind="price"></span>
</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 /> <!--小数点后3位-->
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.price=500.1314;
}]);
</script>
大家可以工具里运行一下。首先是原始的输出方法
使用currency可以将数字格式化为货币,默认是美元符号,你也可以自己传入所需的符号,例如上面传入的人民币。
2 日期时间过滤器
<div>
原始输出:<span ng-bind="date"></span>
</div>
<div>
日期格式化:<span ng-bind="date |date"></span>
</div>
<div>
<span ng-bind="date |date:'yyyy年MM月dd日 hh:mm:ss'"></span>
<span ng-bind="date |date:'yyyy年MM月dd日'"></span><br />
<span ng-bind="date |date:'hh:mm:ss'"></span>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.date=new Date();
}]);
</script>
日期格式化:
原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求
通常情况下,通常按照用户的要求进行输出,这时就会附带参数
y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
案例中最后两个就是根据自己的需要加参数。
3 过滤输出
关键词:<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>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.users=[
{userID:1,username:"baiqian",nickname:"白浅"},
{userID:2,username:"fengjiu",nickname:"凤九"},
{userID:3,username:"yehua",nickname:"夜华"},
{userID:4,username:"ali",nickname:"阿离"},
{userID:5,username:"donghua",nickname:"东华"},
{userID:6,username:"erge",nickname:"二哥"},
]
}]);
通过关键字来过滤输出和查找 如上面的例子,如果输入b 就会出现userID中的“baiqian”。
4.JSON 过滤
<span ng-bind="users|json"></span>
数据中的对象,转换成JSON字符串的格式输出展示到页面上, 经常能用于代码程序调试,这个使用较少!
5 长度限制过滤器
长度:<input type="text" ng-model="length"/><br />
位置:<input type="text" ng-model="index"/>
<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>
这里的username ID nickname对应的跟上面的 过滤输出 一样,limitTo是截取长度 index是下标
6 字符串大小写转换过滤器
<div ng-bind="name"></div>
<div ng-bind="name | uppercase"></div>
<div ng-bind="name | lowercase"></div>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.name="Summer Wang";
}]);
</script>
uppercase 大写 lowercase小写
7 排序输出
排序关键词:<input type="text" ng-model="kerword"/><br/>
排序顺序:<input type="checkbox" ng-model="sort"/>倒序
<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>
orderBy 排序 默认false 降序 true升序
8 number
{{149016.1945000 | number:2}}
保留小数
以上都是内置的一些过滤器,应用起来不难,里面有些常见的,有需要的尽管copy,有问题的再纠正
除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。如果有需要,下篇文章再来分享哈~