AngularJs Filter详解1-内置过滤器

来源：互联网发布：volt模板引擎 php 编辑：程序博客网时间：2024/05/21 17:36

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

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

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

内置过滤器，如下：

1.大小写转换

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

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

    <div class="help-block">        {{ {name:'zhangsan',age:15} }}        <br />        {{ {name:'zhangsan',age:15 }|json }}    </div>

3.number格式化

    <div class="alert alert-success">        {{1.2345|number:1}}        <br />        {{1.2345|number:3}}        <br />        {{1234567|number}}    </div>

4.currecy货币格式化

    <div class="panel-body">        {{500|currency}}        <br />        {{250|currency:'RMB ￥ '}}    </div>

5.date格式化

    <div>        {{ 1304375948024 |date}}        <br />        {{ dateOne |date:'hh:mm:ss'}}        <br />        {{ dateTwo |date:'yyyy-MM-dd hh:mm:ss'}}        <br />        {{ dateThree |date:'yyyy年MM月dd日'}}        <br />    </div>

<script>    //3. orderBy 过滤器格局表达式排序数组，字典排序可设置正序、倒叙    //默认升序    var app = angular.module('myApp', []);    app.controller('myCtrl', function ($scope) {        $scope.dateOne = new Date();        console.info(new Date().toJSON());        $scope.dateTwo = new Date().toJSON();        // /Date(1464941268937)/        $scope.dateThree = '1464941268937';    });</script>

6.filter查找

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

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

    <div class="alert alert-success">        {{'i want you'| limitTo:3}}        <br />        {{'i want you'| limitTo:-3}}        <br />        {{[1,3,5]|limitTo:1}}        <br />        {{[1,3,5]|limitTo:-1}}    </div>

8.orderBy 对象排序

    <div class="panel-body">        //根id降序排          <br />        {{ [{"age": 20,"id": 10,"name": "iphone"},        {"age": 12,"id": 11,"name": "sunm xing"},        {"age": 44,"id": 12,"name": "test abc"}]         | orderBy:'id':true }}                 <br />        //根据id升序排          <br />        {{[{"age": 20,"id": 10,"name": "iphone"},        {"age": 12,"id": 11,"name": "sunm xing"},        {"age": 44,"id": 12,"name": "test abc"}]         | orderBy:'id'}}             </div>

0 0