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 ...
随机推荐
- 优化 从Draw Calls到GC
原文出处: 慕容小匹夫的博客(@慕容小匹夫) 欢迎分享原创到伯乐头条 前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章 ...
- GitHub上最火的40个Android开源项目
http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects
- Struts2 的 值栈和ActionContext
1.ValueStack 和 ActionContext 的关系与区别: -- 相同点:它们都是在一次HTTP请求的范围内使用的,它们的生命周期都是一次请求 -- 不同点:ValueStack 分为对 ...
- b/s结构的物业管理系统(一)-------登录篇
最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习 ---前端登录页面------ 这个页面的输入框组用的bootstrap的,我设置了几张背 ...
- IntelliJ设置鼠标悬浮提示和修改快捷键
IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck
- jsp js action之间的传值
1.struts2 action如何向JSP的JS函数传值 action中定义变量public class TestAction extends ActionSupport implements Se ...
- AWT事件处理
AWT事件处理基本概念 AWT事件处理过程中,主要涉及3类对象: ① Event(事件):用户对组件的一个操作,称之为一个事件,以类的形式出现,例如,键盘操作对应的事件类是KeyEvent.其实例 ...
- 2016CCPC 合肥--最大公约数//每一年通向它的路上,多少人折戟沉沙,多少人功败垂成,有人一战成名,有人从头再来。
有这样一个有关最大公约数的函数:函数 f(x, y): { c=0 当 y>0: { c +=1 t = x % y x = y y = t } 返回 c * x * x} 给出三个正整数n,m ...
- 关于yii2框架活动记录activeRecord添加默认字段的问题
平时使用sql的时候可以如下添加默认字段flag: "select a.*,0 as flag from user_info a", 对于yii2框架则需要这样: $query = ...
- 我 && yii2(日志埋点,邮件提醒)
今天试着把yii2 的日志,如果发送邮件的形式实现,具体实现如下 1.环境介绍 lnmp php5.6, mysql5.5, lnmp1.2 yii2-advanced 2.配置文件的编写 在fron ...