AngularJS实战之filter的使用一
一、格式化数字为货币格式。
<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的使用一的更多相关文章
- AngularJS实战之filter的使用二
博文一中的filter是angular自带的filter,一般不会满足我们的使用.我们可以自定义filter. 一.自定义filter实现反转字符串 <div>{{ceshi|revers ...
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- [转] Spring Boot实战之Filter实现使用JWT进行接口认证
[From] http://blog.csdn.net/sun_t89/article/details/51923017 Spring Boot实战之Filter实现使用JWT进行接口认证 jwt(j ...
- Angularjs 1 使用filter格式化输出href
Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- AngularJS实战项目(Ⅰ)--含源码
前言 钻研ABP框架的日子,遇到了很多新的知识,因为对自己而言是新知识,所以经常卡在很多地方,迟迟不能有所突破,作为一个稍有上进心的程序员,内心绝对是不服输的,也绝对是不畏困难的,心底必然有这样一股力 ...
- AngularJs学习笔记-慕课网AngularJS实战
第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- angularjs ngTable -Custom filter template-calendar
jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...
随机推荐
- LINUX SSH修改默认22/添加端口
通常ssh远程登录的默认端口是22,但是因为端口22属于高危端口,因此很多时候作为服务器会被关掉,不过这个端口一般是可以更改或者添加的,这样除了22端口,也可以通过别的端口进行访问. 1.首先修改配置 ...
- java命令启动jacocoagent及生成报告
启动jacocoagent: java -Xms1024m -Xmx2048m -XX:-UseGCOverheadLimit -Ddruid.keepAlive=true -javaagent:/h ...
- 一、MySQL的连接建立与权限
一.MySQL的连接建立与权限 写这些的目的一是记录下工作这几年所学,算是成长脚印吧.二是复习一遍,也给自己当笔记看,通篇观点都属于个人理解较多.读者观看的时候也需要自己判断下是否正确,另外,记下一段 ...
- NuGet打包,IIS自动发布
NuGet学习笔记(1)——初识NuGet及快速安装使用 https://kb.cnblogs.com/page/143190/ NuGet学习笔记(2)——使用图形化界面打包自己的类库 https: ...
- Charles基本使用
Charles使用 查找电脑IP,菜单选项helpàLocal IP Addresses 手机连接代理 手机打开WiFi,把代理模式设置为手动,设置主机名为Charles所在机器的ip,端口号为Cha ...
- windbg 边学边记attach 进程和open dump的两个方式查看线程的占用cpu资源
首先我是attach到进程的方式,附加到进程把. vs里边有个远程调试就是通过连接到远程机附加到进程操作的.在 有公网IP情况下挺好用,但涉及到nat穿越之类的,因为用户的不方便设置,这种调试方式也有 ...
- ES6 Generator的应用场景
一.基础知识 API文档 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个 ...
- 从matlab中导出下载到的轨迹数据
我从该网址(http://www.ee.cuhk.edu.hk/~xgwang/MITtrajsingle.html)下载到了一些轨迹数据. 网页中简单说明了轨迹数据的由来:原始数据是在一个停车场上方 ...
- vs视图引入命名空间设置方法
解决: 1.@using在cshtml的最上面,加上一句: @using Puzzle.Framework.Common 2.在View文件夹下面的web.config里面加: <system. ...
- 生成器(generator)
1. 什么是生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且, 创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元 ...