AngularJS中filter的使用实例详解


Posted in Javascript onAugust 25, 2017

AngularJS中filter的使用实例详解

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

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

script:

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

显示为 
AngularJS中filter的使用实例详解 

二、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的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
jQuery cdn使用介绍
May 08 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
js实现详情页放大镜效果
Oct 28 Javascript
微信小程序实现表单校验功能
Mar 30 #Javascript
Angularjs中ng-repeat的简单实例
Aug 25 #Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 #Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
You might like
smarty模板局部缓存方法使用示例
2014/06/17 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python封装shell命令实例分析
2015/05/05 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Django视图和URL配置详解
2018/01/31 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
教师节促销活动方案
2014/02/14 职场文书
会议主持词
2014/03/17 职场文书
考试作弊检讨书
2014/10/21 职场文书
民事和解协议书格式
2014/11/29 职场文书
业务员管理制度范本
2015/08/06 职场文书
离婚协议书格式范本
2016/03/18 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript