Angular——自定义过滤器
基本介绍
除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。
基本使用
（1）input是将绑定的数据以参数的形式传入
（2）input后面的参数也就是：后面的参数，指导在视图时候该如何传递参数
（3）filter方法的回调函数将函数作为返回值，最后这个函数会在视图中进行调用，并且返回值
App.filter('demo', function () {
return function (input, arg) {
return input + ' Hello ' + arg;
}
});
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/angular.min.js"></script>
</head>
<body>
<div ng-controller="DemoController">
<span>{{name|demo:123}}</span><br>
<span>{{text|capitalize}}</span>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.name = 'wqx';
$scope.text = 'hello world';
}]);
App.filter('demo', function () {
return function (input, arg) {
return input + ' Hello ' + arg;
}
});
App.filter('capitalize', function () {
return function (input) {
return input[0].toUpperCase() + input.slice(1);
}
});
</script>
</body>
</html>
//返回值
wqx Hello
Hello world
Angular——自定义过滤器的更多相关文章
- 简述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 自定义过滤器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- angular自定义过滤器操作实例
//模块名字var filters = angular.module("customFilter",[]);//过滤器名字filters.filter("uniqueCa ...
- angular之自定义过滤器的使用
自定义过滤器需要使用filter函数,格式如下: filter("filterName',function(){ return function(target,args){ .... } } ...
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- angularJS自定义 过滤器基础
先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- AngularJS实现的自定义过滤器简单示例
本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
- Binary Tree Maximum Path Sum 自底向上求解(重重重重)
题目: 链接 解答: 自底向上求解.left_max right_max分别返回了左右子树的最大路径和,假设左右子树最大路径和小于0.那么返回零. 用这个最大路径和和根节点的值相加.来更新最大值,同一 ...
- 12、Cocos2dx 3.0游戏开发找小三之3.0中的生命周期分析
重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我们执行了第 ...
- Node后台使用mysql并开启事务
如题:node后台使用mysql数据库,并使用事务来管理数据库操作. 这里主要讲一个事务的封装并写了一个INSERT 插入操作. code: 基础code: db.config.js const my ...
- react 开发过程中的总结/归纳
1.点击元素,获取绑定该事件的父级元素,使用 e.currentTarget.e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素. 2.使用 react router ...
- web 开发之js---js 多线程编程
AJAX 开发中的难题 试试多线程编程 想了解更多 有关作者 转载注明出处:http://www.infoq.com/cn/articles/js_multithread 虽然有越来越多的网站在应 ...
- ARP协议(4)ARP编程
之前的几篇文章,分别介绍了 ARP 协议格式,在vs2012里配置winpcap环境,我们该做的准备都已经做完了.如今我们真正来实现了. 一.定义数据结构 依据ARP的协议格式,设计一个ARP协议格式 ...
- Interval 计时器
语法: setInterval(代码,交互时间); 在执行时,从载入页面后每隔指定的时间执行代码. clearInterval( setInterval() 返回的 ID 值 ): 取消计时器 < ...
- UVA 315 求连通图里的割点
http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20837 哎 大白书里求割点的模板不好用啊,许多细节理解起来也好烦..还好找了 ...
- USACO Section1.1PROB Broken Necklace
有点麻烦的一道模拟(官方题解好像有复杂度为$O(n)$DP的姿势?,感觉好烦,以后再细看~ 在一些细节上调试了很久很久,囧RZ /* ID: jusonal1 PROG: beads LANG: C+ ...
- 魏汝盼医学博士 - Judy Zhu Wei, M.D., F.A.C.O.G.
魏汝盼医学博士 - Judy Zhu Wei, M.D., F.A.C.O.G. 医院(诊所)名称:CAPRI妇产科诊所 妇产科,华人医生,微创妇科手术专科医生,女医生,fountai ...