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 相关文章推荐
JS自动缩小超出大小的图片
Oct 12 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
JavaScript中return用法示例
Nov 29 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
js实现文章目录索引导航(table of content)
May 10 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
财务科科长岗位职责
2014/03/10 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
2016年清明节寄语
2015/12/04 职场文书
学习心得体会
2019/06/20 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android