常用的AngularJS过滤器
来源:互联网 发布:千股千评软件下载 编辑:程序博客网 时间:2024/06/05 00:38
大家好,今天在淘宝上购买物品时,通过价格,人气,商品销量都可以有序的进行排列,方便我们通过不同的方面去挑选商品。那么今天我跟大家分享下AngularJS的一些过滤器通常用于各种筛选,排序等方面,都可以通过AngularJS来实现
1.AngularJS过滤器干什么的?
通过某个规则来对进行对数据的处理,然后返回处理后的结果
2.AngularJS过滤器用在什么地方?
用来对数据的格式化,通过AngularJS的内置过滤器可以使用不同的规则,对数据的处理
3.AngularJS内置过滤器都有什么?及其使用方式
常用的过滤器我详细介绍,不常用的就一提就过,还望大家谅解!
过滤器使用方式通常在前面加|(管道)符号,意思是数据通过管道进行过滤,就是相对象的规格化处理后剩下的数据返回
currency货比过滤器:对货比进行一定的规则式处理
使用方式:
默认货比过滤器输出方式:<span ng-bind="price | currency"></span></br>
$scope.price=499.0123 输出结果:$499.0123
带参数货比过滤器输出方式:<span ng-bind="price | currency:'人民币¥'"></span>$scope.price=499.0123输出结果人民币¥499.0123参数货比过滤器输出方式:<span ng-bind="price | currency:'¥':3"></span>
$scope.price=499.0123输出结果人民币¥499.012currency:'¥'自定义货比符号 currency:'¥':3 保留三位小数
date日期过滤器:对时间进行了一些处理:
处理方式:
原始输出实践方式: <span ng-bind="date"></span> 格式化后日期方式: <span ng-bind="date | date"></span> 格式化后自定义日期方式: <span ng-bind="date | date:'yy年mm月dd日 hh:mm:ss'"></span> 格式化后自定义日期方式: <span ng-bind="date | date:'yy年mm月dd日'"></span> 格式化后自定义日期方式: <span ng-bind="date | date:'hh:mm:ss'"></span>$scope.date=new Date();别忘记了获取时间!filter输出过滤器:是对输出内容的筛选
处理方式:
<ul> <li ng-repeat="x in xin | filter:keyword"> <span ng-bind="x.xID"></span> <span ng-bind="x.xName"></span> <span ng-bind="x.xage"></span> </li> </ul>然后在文本框内输入相对性的ID、name、age就可以对数据进行过滤筛选。这个可以用来做购物车的内容筛选,例如商品销量、人气、价格等length长度过滤器:
处理方式:
<input type="text" ng-model="length"></input><ul> <li ng-repeat="x in xin | limiTo:length">
<span ng-bind="x.xID"><span> </li></ul>
uppercase字符大小写控制器:原始字符输出: <div ng-bind="name"></div> 格式化字符输出(大写): <div ng-bind="name|uppercase"></div> 格式化字符输出(小写): <div ng-bind="name|lowercase"></div>
sort排序:排序关键字: <input type="text" ng-model="keyword"> 排序顺序: <input type="checkbox" ng-model="sort">倒序 <li ng-repeat="x in xin | orderBy:keyword:sort "></li>
在我的工作中常用的就这几个,若有不足之处,请评论,大家共勉!
0 0
- 常用的AngularJS过滤器
- AngularJs 常用的过滤器
- angularJs常用过滤器
- angularJS的过滤器详解
- angularjs的过滤器
- AngularJS 霸道的过滤器
- angularjs过滤器的学习
- angularJS的过滤器
- AngularJs的过滤器
- AngularJS的过滤器总结
- angularJS过滤器和自定义的过滤器
- AngularJs基本篇 三(常用指令+过滤器)
- AngularJS的内置过滤器总结
- Angularjs 的过滤器使用小结
- angularjs 过滤器
- AngularJs 过滤器
- AngularJS--过滤器
- AngularJs过滤器
- HTML5复习 (2)
- Android Studio自定义模板 做开发竟然可以如此轻松
- 团体程序设计天梯赛L2-021 点赞狂魔
- ZOJ 1008 Gnome Tetravex(DFS)
- MAC下PYCHARM环境中openCV不显示图片的问题
- 常用的AngularJS过滤器
- 纯代码布局控件
- AngularJS 控制器controller 连载3
- Spring boot项目 使用ip+port+contextPath进行访问的时候会直接显示出项目中的一些接口信息和相关数据
- 完全背包
- mysql练习
- 快速判断一个数是否是2的幂次方,若是,并判断出来是多少次方!
- c++实现string的split
- pycharm安装以及连接mysql数据库