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.net/practice/435fb86331474282a3499955f0a41e8b?tpId=13&tqId=11191&tPage= ...
- AutoCAD如何编辑块，打散块
选中块之后,点击最右侧的最后一个工具"分解"即可.
- 【CERC2008】【BZOJ4319】Suffix reconstruction
Description 话说练习后缀数组时,小C 刷遍 poj 后缀数组题. 各类字符串题闻之丧胆.就在准备对敌方武将发出连环杀时,对方一记无中生有,又一招顺 手牵羊.小C 程序中的原字符数组就被牵走 ...
- [计算机故障]华为手机无法连接XP系统（inf中找不到所需的段落）
同事新买的华为手机麦芒C199,拍了些照片.结果连接电脑,没有反应. 后经打电话到华为,可以到华为官网下驱动. 地址如下: http://consumer.huawei.com/cn/support/ ...
- ios33--线程通信
// // ViewController.m // 06-掌握-线程间通信 // // atomic:为set方法加锁,线程安全,需要消耗资源. // nonatomic:不为set方法加锁,非线程安 ...
- 理解dropout——本质是通过阻止特征检测器的共同作用来防止过拟合 Dropout是指在模型训练时随机让网络某些隐含层节点的权重不工作，不工作的那些节点可以暂时认为不是网络结构的一部分，但是它的权重得保留下来（只是暂时不更新而已），因为下次样本输入时它可能又得工作了
理解dropout from:http://blog.csdn.net/stdcoutzyx/article/details/49022443 http://www.cnblogs.com/torna ...
- 洛谷 P1966 火柴排队 —— 思路
题目:https://www.luogu.org/problemnew/show/P1966 首先,一个排列相邻交换变成另一个排列的交换次数就是逆序对数: 随便画一画,感觉应该是排个序,大的对应大的, ...
- Python基础Web服务器案例
一.WSGI 1.PythonWeb服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI) 是Python应用程序或框架和Web服务器之间的一种接口, ...
- 矩阵取数游戏 2007年NOIP全国联赛提高组(dp+高精)
矩阵取数游戏 2007年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description [问题描述]帅帅经常跟 ...
- bzoj1051受欢迎的牛(Tarjan）
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4776 Solved: 2542 Description ...