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 ...
随机推荐
- 七夕节 看到很多停止更新的blog 莫名有点淡淡的忧桑
又是一年七夕.又是一年单身.看到很多停止更新的blog, 仿佛看到了一茬一茬的程序猿 进入it 圈 又离开it圈,就有莫名的忧桑
- 华为OJ2051-最小的K个数（Top K问题）
一.题目描述 描述: 输入n个整数,输出其中最小的k个. 输入: 输入 n 和 k 输入一个整数数组 输出: 输出一个整数数组 样例输入: 5 2 1 3 5 7 2 样例输出: 1 2 二.Top ...
- python爬虫实践--求职Top10城市
前言 从智联招聘爬取相关信息后,我们关心的是如何对内容进行分析,获取用用的信息.本次以上篇文章“5分钟掌握智联招聘网站爬取并保存到MongoDB数据库”中爬取的数据为基础,分析关键词为“python” ...
- [英语学习]微软面试前英语集训笔记-day 1
最近有机会参加微软面试前的英语集训. 第一天是由wendy老师主讲.热场题目是介绍你自己.包括你的姓名,家庭hobby,爱好,专业,学校,工作经历等等. 接下来的主题是friendship.给我印象较 ...
- Credit Risk Scorecards Credit Risk Modeling 评分卡 KS AR
https://cn.mathworks.com/help/finance/creditscorecard.validatemodel.html?requestedDomain=www.mathwor ...
- luogu1155 双栈排序
题目大意 运用两个栈的push和pop操作使得一个序列单调递增且操作字典序最小.$n\leq 1000$. 题解 本题我们要尝试运用“瞪眼法”,也就是推样例.我们显然要数字尽可能地推入第一个栈.那么问 ...
- aarch64-linux-gnu交叉编译Qt4.7.3
到 Qt 官网下载合适的 Qt 版本,地址:http://download.qt-project.org/archive/qt/ 1.环境搭建: 1.安装automake.libtool 和主机上的 ...
- AndroidStudio更改Gradle的版本
1.首先需要在Gradle官网上下载需要的gradle版本,对于imac需要放置到AndroidStudio的安装目录下的gradle目录下面 2.更改项目的build.gradle的gradle的版 ...
- 解决juqery easyui combobox只能选择问题
1.首先设定框为 combobox样式,该字段值为了进行值的显示 <tr class="odd_row"> <td class="TableLabel_ ...
- ubuntu16.04 查看系统可用内存
free -m 查看内存情况 (单位MB) mem 行显示了从系统角度看来内存使用的情况, total是系统可用的内存大小, 数量上等于系统物理内存减去内核保留的内存. buffers和cach ...