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 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
javascript中的事件代理初探
Mar 08 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
Vue监听页面刷新和关闭功能
Jun 20 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中的串行化变量和序列化对象
2006/09/05 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
移动端界面的适配
2017/01/11 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python怎么判断模块安装完成
2020/06/19 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
html5唤起app的方法
2017/11/30 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
国税会议欢迎词
2014/01/16 职场文书
校友回访母校寄语
2015/02/26 职场文书
中学生自我评价范文
2015/03/03 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript