AngularJs Filter详解1

前端之家收集整理的这篇文章主要介绍了AngularJs Filter详解1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在AngularJs中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中 。

angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。

AngularJs过滤去可用于转换数据。

内置过滤器,如下:

1.大小写转换

  1. <div class="alert alert-info">
  2. {{"lower cap string"|uppercase }}<br />
  3. {{"Tank Is GOOD"|lowercase}}
  4. </div>


2.json格式化(将对象转换成json字符串),默认输出就是json字符串

  1. <div class="help-block">
  2. {{ {name:'zhangsan',age:15} }}
  3. <br />
  4. {{ {name:'zhangsan',age:15 }|json }}
  5. </div>

3.number格式化

  1. <div class="alert alert-success">
  2. {{1.2345|number:1}}
  3. <br />
  4. {{1.2345|number:3}}
  5. <br />
  6. {{1234567|number}}
  7. </div>

4.currecy货币格式化

  1. <div class="panel-body">
  2. {{500|currency}}
  3. <br />
  4. {{250|currency:'RMB ¥ '}}
  5. </div>

5.date格式化

  1. <div>
  2. {{ 1304375948024 |date}}
  3. <br />
  4. {{ dateOne |date:'hh:mm:ss'}}
  5. <br />
  6. {{ dateTwo |date:'yyyy-MM-dd hh:mm:ss'}}
  7. <br />
  8. {{ dateThree |date:'yyyy年MM月dd日'}}
  9. <br />
  10. </div>
  1. <script>
  2. //3. orderBy 过滤器格局表达式排序数组,字典排序可设置正序、倒叙
  3. //默认升序
  4. var app = angular.module('myApp',[]);
  5. app.controller('myCtrl',function ($scope) {
  6. $scope.dateOne = new Date();
  7. console.info(new Date().toJSON());
  8. $scope.dateTwo = new Date().toJSON();
  9. // /Date(1464941268937)/
  10. $scope.dateThree = '1464941268937';
  11. });
  12. </script>

6.filter查找

  1. <div class="help-block">
  2. //查找含有有4的行
  3. <br />
  4. {{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}]
  5. | filter:'4' }}
  6. <br />
  7. //查找name含有iphone的行
  8. <br />
  9. {{ [{"age": 20,"name": "test abc"}]
  10. | filter:{'name':'iphone'} }}
  11. </div>


7.limitTo 字符串或对象的截取

  1. <div class="alert alert-success">
  2. {{'i want you'| limitTo:3}}
  3. <br />
  4. {{'i want you'| limitTo:-3}}
  5. <br />
  6. {{[1,3,5]|limitTo:1}}
  7. <br />
  8. {{[1,5]|limitTo:-1}}
  9. </div>

8.orderBy 对象排序

  1. <div class="panel-body">
  2. //根id降序排
  3. <br />
  4. {{ [{"age": 20,"name": "test abc"}]
  5. | orderBy:'id':true }}
  6. <br />
  7. //根据id升序排
  8. <br />
  9. {{[{"age": 20,"name": "test abc"}]
  10. | orderBy:'id'}}
  11. </div>

猜你在找的Angularjs相关文章