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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JS Attribute属性操作详解
May 19 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
天津市收音机工业发展史
2021/03/04 无线电
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
javascript中call和apply的用法示例分析
2015/04/02 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python利用faker库批量生成测试数据
2020/10/15 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
Java基础知识面试题
2014/03/25 面试题
2014年销售助理工作总结
2014/12/01 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python