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 ...
随机推荐
- vijos - P1447开关灯泡 (大数模板 + 找规律 + 全然数 + python)
P1447开关灯泡 Accepted 标签:CSC WorkGroup III[显示标签] 描写叙述 一个房间里有n盏灯泡.一開始都是熄着的,有1到n个时刻.每一个时刻i,我们会将i的倍数的灯泡改变状 ...
- Kafka跨集群同步工具——MirrorMaker
MirrorMaker是为解决Kafka跨集群同步.创建镜像集群而存在的.下图展示了其工作原理.该工具消费源集群消息然后将数据又一次推送到目标集群. watermark/2/text/aHR0cDov ...
- 基于Office 365 无代码工作流分析-数据源的建立！
标准操作步骤 下面整个步骤我们是以嘉昊信息的招聘过程的整个流程为一个场景,整个的流程场景的步骤例如以下: 整个的过程,我们通过Infopath 进行对应的表单流转,然后利用Sharepoint ...
- Python 获取新浪微博的热门话题 (API)
Code: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-06-27 @author: guaguastd @name: ...
- SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行。
Oracle数据导入报错:SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行. 原因:进入sqlplus里是不能运行imp的(sqlplus不认 ...
- 在对象内部尽量直接訪问实例变量 --Effictive Objective-C 抄书
在对象之外訪问实例变量时,应该总是通过属性来做.在那么在对象内部訪问实例变量的时候,又该怎样呢? 这是 OCer们一直激烈讨论的问题.有人觉得,不管什么情况,都应该通过属性来訪问实例变量;也有人说,& ...
- PH_Pooled Featrues Classification MIREX 2011 Submission
Abstract Principal Mel-Spectrum Components (Feature) Temporal Pooling Functions (Model) Single Hidde ...
- Mycat（5）：聊天消息表数据库按月分表实践，平滑扩展
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/47003577 未经博主同意不得转载. 1,业务需求 比方一个社交软件,比方像腾讯 ...
- Guava ---- EventBus事件驱动模型
在软件开发过程中, 难免有信息的共享或者对象间的协作. 怎样让对象间信息共享高效, 而且耦合性低. 这是一个难题. 而耦合性高将带来编码改动牵一发而动全身的连锁效应. Spring的风靡正是由于攻克了 ...
- 2016/1/17 笔记 1,面向对象编程OOP 2,类 全
面向对象编程OOP 编程方式的发展 1,面向过程 重用性低 维护工作量大 2,面向对象 重用性高 维护容易 概念 1,对象 Object 一个具体的事物 是类的实例 2,类Class 同一 ...