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 ...
随机推荐
- 8VC Venture Cup 2016 - Final Round (Div2) E
贪心.当前位置满油可达的gas station中,如果有比它小的,则加油至第一个比他小的.没有,则加满油,先到达这些station中最小的.注意数的范围即可. #include <iostrea ...
- Pivotal Cloud Foundry安全原理解析
云计算相关的技术差点儿都对传统网络架构和安全规则产生一定的冲击.Pivotal Cloud Foundry(PCF)也不例外,去年8月为了说服专业安全组织允许PaaS部署方案,特意为他们深入讲了下PC ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 用C# (.NET Core) 实现抽象工厂设计模式
用C# (.NET Core) 实现抽象工厂设计模式 本文的概念性内容来自深入浅出设计模式一书. 上一篇文章讲了简单工厂和工厂方法设计模式 http://www.cnblogs.com/cgzl/ ...
- 【版本号公布】Jeecg-P3 1.0 公布，J2EE微服务框架（插件开发）
JEECG-P3 1.0 公布了! JEECG-P3 1.0是一个J2EE微服务框架(插件开发). 特点:业务组件以JAR方式提供,插件模式.松耦合.可插拔.支持独立部署,也能够无缝集成Jeecg平台 ...
- 【hdu3966】Aragorn's Story
题意:给一棵树,并给定各个点权的值,然后有3种操作:I C1 C2 K: 把C1与C2的路径上的所有点权值加上KD C1 C2 K:把C1与C2的路径上的所有点权值减去KQ C:查询节点编号为C的权值 ...
- mysqld 与 python 邮件监控脚本 内存消耗对比
top - 21:38:40 up 1 day, 10:38, 5 users, load average: 0.00, 0.01, 0.17Tasks: 88 total, 1 running, 8 ...
- 关于Domain Sepcific Lang
今天在看一些关于CO的东东 里面提到,用从语言派生出来的领域语言再去编写代码会大大加速开发进程 PHP应该是个典型的领域语言(Perl之于文本处理也是这样),虽然不是从什么其他领域派生出来的,但是使用 ...
- [RK3288][Android6.0] 调试笔记 --- 录音音量从HAL到APP层会变小问题【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/72783843?locationNum=9&fps=1 Platform: Rockc ...
- 异常机制及throw与throws的区别(转)
异常机制及throw与throws的区别 分类: Java2008-11-14 16:08 9672人阅读 评论(5) 收藏 举报 exceptionstringjavafunclass编译器 Jav ...