angularJS自定义一个过滤器
ng允许我们自定义指令
下面来我们自己来定义一个过滤指令：filter,返回一个函数的形式
filter(name,callback(){//name:过滤器的名字，callback：匿名函数
return function(collection,keynames){//collection:该指令前面的对象，keynames:用于过滤的关键字
/........................./
}
})
1.金典的例子
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="item in array_object | unique:'name'">
{{item}}
</div>
</body>
</html>
<script>
angular.module("myApp",[])
.controller("myCtrl",["$scope",function(s){
s.array_object=[{"name":"明哥哥"},{"name":"小林黛玉"},{"name":"大哥大"},{"name":"小林黛玉"}];
s.Two_Fish="fdsdf";
s.change=function(){
console.log(s.Two_Fish); }
}])
.filter("unique",function(){
return function(collection,keynames){//collection->array_object、keynames->name,分别对应过滤器两边的条件
var output=[];//存储，过滤之后的对象
var keys=[];//用于对比过滤
angular.forEach(collection,function(item){
var key=item[keynames];
if(keys.indexOf(key)===-1){
keys.push(key);
output.push(item);
} });
console.log(output);
return output;
}
});
</script> 结果很迷人：
{"name":"明哥哥"} {"name":"小林黛玉"} {"name":"大哥大"}
2.如果要进行多个参数进行过滤：
<span ng-bind="d[h.key] | numFormat:h.adSrhType:camb"></span>
// 数字的千分符转换
.filter('numFormat',[function(){
return function numToThousands (n,valType,camb) {
if (valType === 'number' && n!== undefined && n!==null && n.toString().length > 0){
n = n.toString();
var re = /\d{1,3}(?=(\d{3})+$)/g;
n = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, '$&,') + s2;});
}
return n;
};
}])
angularJS自定义一个过滤器的更多相关文章
- vue自定义一个过滤器
vue如何自定义一个过滤器 html代码: <div id="app"> <input type="text" v-model="m ...
- angularjs自定义日期过滤器，如：周日（前天 21:24）
今天给大家分享一个,我在项目中自定义的一个日期过滤器.具体过滤出来的效果可参看下图: 用法: {{ time | timeFilter }} filter: App.filter('timeFilte ...
- ng自定义一个过滤器
ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- angularjs自定义过滤器
实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
随机推荐
- Java SHA256/Base64转.NET(C#)实现---(华为云云市场.NET版本加密方式)
前言: 工作需要,对接华为云应用市场的 API 接口,由于维护团队都是 .NET 所以用 .NET 来开发. 简单了解一下 SHA256 加密算法,本质就是一个 Hash,与 MD5 相比就是计算量大 ...
- Python----Paramiko模块和堡垒机实战
paramiko模块 paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来现实 ...
- iOS自动化探索（九）使用Jenkins自动化打包并发布iOS App
继前一篇: Mac环境下安装Jenkins Jenkins安装好后, 我们试着创建一个iOS自动打包并发布的任务 iOS App构建必须在MAC上面使用xcode进行,所以我们要安装下xcode集成插 ...
- log4j 日志详解
# 以下是rootLogger的配置,子类默认继承,但是子类重写下面配置=rootLogger+自己配置,我晕#输出到控制台 log4j.appender.console=org.apache.log ...
- FreeMarker初探--介绍
FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现 ...
- SqlServer中存储过程 returnC#代码处理以及对应的MySQL如何改写
一.SqlServer 中 1. 创建表 create table testuser( id int, --primary key, names ), address ), paw ) ) 2.创建存 ...
- LeetCode OJ：Letter Combinations of a Phone Number（数字字母组合）
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- React 与 可视化
一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics 全称 可缩放矢 ...
- 我的第一个React自定义组件
今天随便翻了一下antd的组件库,看到下面这样的组件,当时我就震惊了: 这尼玛,这是出于什么样的考虑,一个列表还要用户编写子项的渲染方式. 所以,我就自己写了一个 List.js: List.less ...
- FFmpeg再学习 -- FFmpeg解码知识
继续看雷霄骅的 课程资料 - 基于FFmpeg+SDL的视频播放器的制作 前面用了五个篇幅来讲 FFmpeg,其主要目的是为实现将图片转视频的功能. 总的来说,对于 FFmepg 多少有一些了解了.但 ...