常用的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.012
             currency:'¥'自定义货比符号   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