angular之自定义过滤器的使用
自定义过滤器需要使用filter函数,格式如下:
filter("filterName',function(){
return function(target,args){
....
}
}
filter函数的第一个参数是这个自定义过滤器的名称,第二个函数是个回调函数,在这个函数中需要返回一个函数(inner),在inner函数中我们需要把具体的代码实现封装进去。而inner的第一个从参数target是目标参数,就是需要进行过滤的数据,第二个参数是需要在这个自定义过滤器中传入的参数,例如系统自带的过滤器number:2,此时2就是传入过滤器的参数,也就对应于自定义过滤器的第二个参数。
下面是个具体的例子:
<div ng-controller = 'ctrl'>
<h2>{{name | define}}</h2>
</div>
<script>
var app = angular.module('app',[]);
app.filter('define',function(){
var go = function(na){
var str = na.split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].charAt(0).toUpperCase() + str[i].substring(1);
}
return str.join(' ');
}
return go;
});
app.controller('ctrl',function($scope){
$scope.name = 'this is a demo';
});
</script>
这段代码中的过滤器的作用是将文本中的单词首字母大写。(该代码借鉴于
流浪猫の窝)。
angular之自定义过滤器的使用的更多相关文章
- -_-#【Angular】自定义过滤器
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- angular入门--自定义过滤器
<html ng-app='app1'> <head> <meta name="generator" content="HTML Tidy ...
- 简述angular自定义过滤器在页面和控制器中的使用
首先设置自定义过滤器. 定义模块名:angular ? 1 2 3 4 5 6 .module('myApp') .filter('filterName',function(){ return fun ...
- angular自定义过滤器在页面和控制器中的使用
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- Angular——自定义过滤器
基本介绍 除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器. 基本使用 (1)input是将绑定的数据以参数的形式传入 (2)i ...
- angular自定义过滤器操作实例
//模块名字var filters = angular.module("customFilter",[]);//过滤器名字filters.filter("uniqueCa ...
- 秒味课堂Angular js笔记------过滤器
不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy ...
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- angularJS自定义 过滤器基础
先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...
随机推荐
- 使用SerialPort 读取外置GPS信息和使用GeoCoordinateWatcher获取内置gps的信息
简介最近工作中需要读取gps设备的信息,平板本身有内置的gps设备,但是精度不够,就又添加了一个外置的gps.对于外置的gps,我们主要通过SerialPort类来获得串口的信息,然后对接收到的内容进 ...
- JS里面利用random()实现随机颜色更换
首先你需要一个div <div id="box"></div> 然后给这个div加入CSS属性 #box{width:500px;height:500px; ...
- ICMP Protocol
[ICMP Protocol] 参考: 1.ICMP Types and Codes:http://www.nthelp.com/icmp.html 2.RFC 792 - Internet Cont ...
- SecureCRT和SecureFx设置中文乱码
SecureCRT和SecureFx设置中文乱码 SecureCRT和SecureFx连接服务器时中文显示乱码,找了好多资料好久都没整出来,后来整出来了,因此把个人的解决办法提供出来,已变帮助更多的人 ...
- Android之HttpURLConnection
1.HttpURLConnection连接URL1)创建一个URL对象 URL url = new URL(); 2)利用HttpURLConnection对象从网络中获取网页数据 HttpURLCo ...
- UItextFiled只能输入数字
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...
- jQuery Mobile 表单输入元素
jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...
- windows无法停用“Android Composite Interface”设备的解决方法
遇到这个问题时,解决方法如下: 打开设备管理器 -> 进程 -> 找到 adb.exe -> 右击选择结束进程 -> 然后重新弹出Android设备
- 网络-->监控-->交换机端口流量监控
一.取交换机端口流量OID 针对交换机接口速率在100M及以下: in方向:1.3.6.1.2.1.2.2.1.10 out方向:1.3.6.1.2.1.2.2.1.16 针对交换机端口速率在百兆以上 ...
- ABAP POPUP函数
POPUP_TO_CONFIRM_LOSS_OF_DATA 弹出一个对话框告知用户有可能丢失数据,询问是否操作继续.POPUP_TO_CONFIRM_STEP 弹出一个对话框询问用户是否操作继续. P ...