一、格式化数字为货币格式。

<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>

script:

app.controller("crl", function($scope, $filter) {
$scope.money="4545";
});

显示为



二、lowercase 格式化字符串为小写。

姓名为 {{ lastName | lowercase }}

app.controller("crl", function($scope, $filter) {
$scope.lastName ="AAA";
});

显示为

aaa

三、uppercase 格式化字符串为大写。

姓名为 {{ lastName | uppercase }}

app.controller("crl", function($scope, $filter) {
$scope.lastName ="aaa";
});

显示为

AAA

四、filter 从数组项中选择一个子集。

	<div>{{array|filter:"s"}}</div>
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>

app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias'
}, {
name : 'Jeff'
}, {
name : 'Brian'
}, {
name : 'Igor'
}, {
name : 'James'
}, {
name : 'Brad'
} ];
});

显示为

[{"name":"Tobias"},{"name":"James"}]

Tobias

James

五、orderBy 根据某个表达式排列数组。

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序,默认为升序

<div ng-repeat="item in array|orderBy:'-name'">降序   {{item.name}}</div>
<div ng-repeat="item in array|orderBy:'name'">升序 {{item.name}}</div>

app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'Brad',age:"19"
} ,{
name : 'aaas',age:"19"
}];
});

显示为

降序 Tobias

降序 Jeff

降序 James

降序 Igor

降序 Brian

降序 Brad

降序 aaas

升序 aaas

升序 Brad

升序 Brian

升序 Igor

升序 James

升序 Jeff

升序 Tobias

5.1.多个模型排序(先按名字排序在按年龄排序)

<div ng-repeat="item in array|orderBy:['name','age']">升序     {{item.name}}{{item.age}}</div>

app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'adsd',age:"19"
} ,{
name : 'adsd',age:"20"
}]; });

显示为

升序 adsd19

升序 adsd20

升序 Brian19

升序 Igor55

升序 James19

升序 Jeff19

升序 Tobias18

AngularJS实战之filter的使用一的更多相关文章

  1. AngularJS实战之filter的使用二

    博文一中的filter是angular自带的filter,一般不会满足我们的使用.我们可以自定义filter. 一.自定义filter实现反转字符串 <div>{{ceshi|revers ...

  2. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  3. [转] Spring Boot实战之Filter实现使用JWT进行接口认证

    [From] http://blog.csdn.net/sun_t89/article/details/51923017 Spring Boot实战之Filter实现使用JWT进行接口认证 jwt(j ...

  4. Angularjs 1 使用filter格式化输出href

    Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...

  5. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  6. AngularJS实战项目(Ⅰ)--含源码

    前言 钻研ABP框架的日子,遇到了很多新的知识,因为对自己而言是新知识,所以经常卡在很多地方,迟迟不能有所突破,作为一个稍有上进心的程序员,内心绝对是不服输的,也绝对是不畏困难的,心底必然有这样一股力 ...

  7. AngularJs学习笔记-慕课网AngularJS实战

    第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...

  8. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  9. angularjs ngTable -Custom filter template-calendar

    jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...

随机推荐

  1. Java_10 继承

    1 继承的好处 继承的出现提高了代码的复用性,提高软件开发效率. 继承的出现让类与类之间产生了关系,提供了多态的前提. 2 继承的注意事项 在Java中,类只支持单继承,不允许多继承,也就是说一个类只 ...

  2. ApplicationContextAware的使用

    一.这个接口有什么用? 当一个类实现了这个接口(ApplicationContextAware)之后,这个类就可以方便获得ApplicationContext中的所有bean.换句话说,就是这个类可以 ...

  3. 学习knockoutjs轻量级的MVVM框架

    教程:knockoutjs介绍 http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5598714 MVVM架构~knockoutjs实现简 ...

  4. linux操作系统-设置静态ip

    在使用linux虚拟机的时候因为经常有关机的需求,然后重新开机后可能面临这上一次获取的ip被改变,在这里我分享一下在linux 下设置静态ip的经验 1.查看路由状态 [root@localhost ...

  5. Oracle_高级功能(10) 备份恢复

    备份与恢复Oracle数据库有三种标准的备份方法,分别是导出/导入(EXP/IMP).热备份和冷备份.导出/导入是一种逻辑备份,冷备份和热备份是物理备份.一.导出/导入(Export/Import)利 ...

  6. PopupWindow与Edittext结合使用所遇到的坑

    PopupWindow与Edittext结合使用一起实现目的:既可以编辑输入想要的内容,还可以通过下拉列表来实现内容的选择. 我就是这样的一个目的,结果很简单的目的却遇到了很大的坑,下面我将把我遇到的 ...

  7. 4A - 排序

    输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整数就是由若干个‘0’组成的,这时这个整数 ...

  8. 8N - 水果

    夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营着一个不大的水果店.他认为生存之道就是经营最受顾客欢迎的水果.现在他想要一份水果销售情况的明细表,这样Joe就可以很容易掌握所有水果的销售情况了 ...

  9. 11. 标准库浏览 – Part II

    第二部分包含了支持专业编程工作所需的更高级的模块,这些模块很少出现在小脚本中. 11.1. 输出格式 reprlib 模块为大型的或深度嵌套的容器缩写显示提供了 :repr() 函数的一个定制版本: ...

  10. BZOJ1084或洛谷2331 [SCOI2005]最大子矩阵

    BZOJ原题链接 洛谷原题链接 注意该题的子矩阵可以是空矩阵,即可以不选,答案的下界为\(0\). 设\(f[i][j][k]\)表示前\(i\)行选择了\(j\)个子矩阵,选择的方式为\(k\)时的 ...