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 ...
随机推荐
- 剑指Offer - 两个链表第一个公共节点
https://www.nowcoder.com/practice/6ab1d9a29e88450685099d45c9e31e46?tpId=13&tqId=11189&tPage= ...
- myEclipse怎样将程序部署到tomcat（附录MyEclipse调试快捷键）
部署 1.选中你要部署的项目,在工具栏找到 Deploy MyEclipse J2EE Project to Server 2.单击Add,即出现例如以下界面.选择对应的Server,要和你在配置to ...
- Swift—使用try?和try!区别-仅供参考
在使用try进行错误处理的时候,经常会看到try后面跟有问号(?)或感叹号(!),他们有什么区别呢? 1.使用try? try?会将错误转换为可选值,当调用try?+函数或方法语句时候,如果函数或方 ...
- FreeRTOS系列第14篇---FreeRTOS任务通知
注:本文介绍任务通知的基础知识,具体源代码分析见<FreeRTOS高级篇8---FreeRTOS任务通知分析> 每一个RTOS任务都有一个32位的通知值,任务创建时,这个值被初始化为0.R ...
- 千万数据条 用户特征数据 写入mysql
from mysql_tool import * import copy s = ''' INSERT INTO `qqzone`.`myu` (`id`, `uid`, `age`, `gender ...
- Codesys——AD_DA在PID控制中的作用
1. 摘要 PID控制中用到AD/DA的输入/输出,给出其大致实现思路. 2. 思路 3. 总结 无
- 呐喊-Skrik
尼斯,1892年1月22日,我和两个朋友还在散步,太阳已快下山了,天空突然间变得血一样红,我似乎感受到了一种悲伤忧郁的气息,我止住了脚步,轻轻地倚在篱笆边,极度的疲倦已使我快要窒息了.火焰般的云彩像血 ...
- 利用JFreeChart生成时序图(6) (转自 JSP开发技术大全)
利用JFreeChart生成时序图(6) (转自 JSP开发技术大全) 14.6 利用JFreeChart生成时序图 通过JFreeChart插件只能生成普通效果的时序图,利用工厂类ChartFact ...
- [LeetCode] Construct Binary Tree from Inorder and Pretorder Traversal
Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- jquery autocomplete自动补全
简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...