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 ...
随机推荐
- Django学习系列之Cookie、Session
Cookie和Session介绍 cookie 保存在客户端 session 保存在服务端 session依赖于cookie,比如服务端想往客户端写东西的时候就把cookie写到客户端浏览器 djan ...
- 一个python自动化测试的例子
http://blog.csdn.net/galen2016/article/details/70882483 https://www.cnblogs.com/TankXiao/category/47 ...
- SpringMVC学习指南-前言
SpringMVC是Spring框架中用于Web应用快速开发的一个模块. SpringMVC基于Spring框架.Servlet和JSP. ------------------------------ ...
- Android自己定义无下划线ClickableSapn超链接文本样式
近期在做评论的时候须要实现这样的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamF2X2ltYmE=/font/5a6L5L2T/fontsize/ ...
- 洛谷 P1759 通天之潜水
P1759 通天之潜水 19通过 65提交 题目提供者lych 标签动态规划洛谷原创 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目背景 直达通天路·小A历险记第三篇 题目 ...
- BZOJ 3041 水叮当的舞步
3041: 水叮当的舞步 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 120 Solved: 67[Submit][Status][Discuss ...
- Noip模拟 Day6.13 By LD T1
一.哲哲回家 出题人的解答: 可以将其转化成最短路模型. 这个地方转车怎么转移有点困难,有两种方法: 1.我们可以再把每一个点拆成M个点,我们用F[i,j]表示从1号点到i这个点并且坐在j路车上的最少 ...
- go6---slice切片
package main /* 切片Slice 其本身并不是数组,它指向底层的数组 作为变长数组的替代方案,可以关联底层数组的局部或全部 为引用类型 可以直接创建或从底层数组获取生成 使用len()获 ...
- data-toggle data-target
data-toggle https://stackoverflow.com/questions/30629974/how-does-the-data-toggle-attribute-work-wha ...
- git log 常用选项
git log 常用选项 -p 按补丁格式显示每个更新之间的差异. jiqing@Ubuntu:/home/wwwroot/default/5hao/sheep$ git log -p commit ...