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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
React中Ref 的使用方法详解
Apr 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
一个PHP分页类的代码
2011/05/18 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Python比较两个图片相似度的方法
2015/03/13 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python偏函数实现原理及应用
2020/11/20 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
电子商务个人自荐信
2013/12/12 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
房地产开发项目建议书
2014/05/16 职场文书
感恩节活动策划方案
2014/05/16 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Golang之sync.Pool使用详解
2021/05/06 Golang
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers