过滤器与自定义过滤器
来源:互联网 发布:模拟人生4社交网络 编辑:程序博客网 时间:2024/05/30 19:33
angularjs中的过滤器为了实现对于表达式结果的筛选、过滤、格式化,达到更好的表现效果。
过滤器的语法:支持多重过滤和传参
{{expression | 过滤器名称 : ‘参数’ | 过滤器名称2:‘参数’ }}
方式:| -》 管道
常用的过滤器:
currency 货币样式的过滤器
date 日期
uppercase/lowercase 大小写的处理
orderBy 对指定的数组进行升序或者降序排列
number 格式化数字为文本(对有小数点的数据的处理)
limitTo 限定数组或者字符串要显示的个数
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script></head><body><div ng-controller="myCtrl"> <table> <thead> <tr> <th>名字</th> <th>分数</th> <th>年龄</th> </tr> </thead> <tbody> <tr ng-repeat="stu in stuList | orderBy:'score':true | limitTo:3"> <td>{{stu.name}}</td> <td>{{stu.score}}</td> <td>{{stu.age}}</td> </tr> </tbody> </table></div><script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope) { $scope.stuList = [ {name:'Mary0',age:20,score:80}, {name:'Mary1',age:21,score:70}, {name:'Mary2',age:22,score:88}, {name:'Mary3',age:23,score:90}, {name:'Mary4',age:24,score:60} ] });</script></body></html>
自定义过滤器方式:
app.filter(‘过滤器名称’,function(){
return function(input,arg){
//input是传递给过滤器的数据
//arg 是过滤器本身的参数
return ‘过滤后的结果’
}
})
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script></head><body><div ng-controller="myCtrl"> <!-- 将price所对应的值通过管道传递给自定义的过滤器--> <h1>{{price | myFilter:'¥' }}</h1></div><script> var app = angular.module('myApp', ['ng']); //创建过滤器:过滤器的本质是方法,有输入有输出 app.filter('myFilter', function () { return function (input,arg) { console.log( '输入为'+input+" 过滤器的参数为:"+arg); var output = arg+input; return output; } }) app.controller('myCtrl', function ($scope) { $scope.price = 100; });</script></body></html>
阅读全文
0 0
- 过滤器与自定义过滤器
- angular过滤器、自定义过滤器
- 自定义过滤器:
- 自定义过滤器
- 自定义过滤器
- 自定义过滤器
- 自定义过滤器
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- MVC系统过滤器、自定义过滤器
- Vue过滤器和自定义过滤器
- AngularJS 过滤器\自定义过滤器 $filter
- AngularJS过滤器以及自定义过滤器
- 自定义struts过滤器与拦截器实现
- 自定义JSP与Servlet中文乱码过滤器
- IP过滤器与登录过滤器
- 过滤器
- 过滤器
- 过滤器
- 动态网站的搭建-学习笔记-阿里云服务器测试
- JavaScript 创建对象的模式
- java重要知识点
- Accelerated C++之计算学生成绩1
- HDOJ2051_Bitset
- 过滤器与自定义过滤器
- Mac 环境变量配置
- leetcode 406. Queue Reconstruction by Height
- android apk反编译工具汇总(2017年10月)
- IntelliJ IDEA 配置Tomcat 运行Web项目
- MySQL5.7版本官方yum方式
- Blog 签到
- Python错误
- Spring详解(七)------事务管理