AngularJs Filter详解1-内置过滤器

原创 2016年06月01日 22:16:41

在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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS中内置过滤器问题?

实在学习AngularJS过滤器中遇到的问题 这个是页面代码 html> html> head> meta charset="utf-8" /> title>...

Angularjs Filter

http://www.cnblogs.com/lvdabao/p/3475426.html http://www.tuicool.com/articles/vmmeQvj http://w...

AngularJs基础——过滤器filter及自定义过滤器filter

1.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币...

angularjs内置过滤器的使用学习

在angular中内置了几个常用的filter,可以简化我们的操作。 过滤器使用 '|' 符号,概念有点类似于linux中的管道。 1、filter (过滤) filter可以根据条件过滤数据,...

AngularJs Filter详解2--自定义过滤器

在AngularJs中可以添加自定义过滤器,来过滤处理或格式化数据 实例1: {{x.name}}----{{x.source}} ...

angularjs开发常见问题-2(angularjs内置过滤器)

在angular中内置了几个常用的filter,可以简化我们的操作。过滤器使用 ‘|’ 符号,概念有点类似于linux中的管道。1、filter (过滤)filter可以根据条件过滤数据,例子:{{[...
  • akemt
  • akemt
  • 2015-07-19 12:28
  • 971

java项目中使用angularjs1.X,解决微信内置h5支付授权目录配置

在项目中使用angularjs1.X,在微信内置浏览器中使用微信支付,授权目录配置总出现XXXXXX#/XXXXX.html/XXXX未注册,想了很多办法,最终解决了,现在记录一下 1、直接后台重定...

AngularJs filter 过滤器

AngularJs filter 过滤器 Filter Ng里的过滤器。 currency:把一个数字格式化成货币模式(如$1,234.56)。当没有提供任何货币符号时,默认使用...

AngularJS 从入门到精通(过滤器(Filter) )

过滤器(Filter),故名思议,源数据通过特定的规则,转换成需要的数据格式, 这个规则,我们统称为过滤器。 AngularJs 的Filter 功能非常强大,并且使用方便。它能够使得页面分组,查询...

angularjs中的filter(过滤器)——格式化日期的date

date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串。 格式化字符串的基本参数: ‘yyyy’: 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)