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 ...
随机推荐
- 快速提取windows备份
windows7的备份功能,还是有很多可取之处的. 其功能的本质是将电脑的分区做成VHD影像文件. 所以,如果你熟悉VHD,可以直接挂载VHD影像,提取文件或恢复系统,或者进入winpe下操作更加简单 ...
- [Spring Boot ] Creating the Spring Boot Project : Demo: Creating a REST Controller
In Spring boot, define a REST API endpoint is pretty easy. package com.globomatisc.bike.controllers; ...
- Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
- js 合并对象
对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...
- C语言++a与a++的实现机制与操作符结合优先级
看到一道"经典Linux C"面试题,关于左值和右值的. 华为笔试题 1.写出推断ABCD四个表达式的是否正确, 若正确, 写出经过表达式中 a的值(3分) int a = 4; ...
- chorme requestBody
https://stackoverflow.com/questions/18534771/chrome-extension-how-to-get-http-response-body Chrome w ...
- Linux watchdog 6300esb
基本原理: Linux 自带了一个 watchdog 的实现,用于监视系统的执行,包含一个内核 watchdog module 和一个用户空间的 watchdog 程序.内核 watchdog ...
- iPhone微信防止撤销插件开发
导语: 随着移动时代的发展以及微信的普及流行,越来越多的用户使用微信发送消息,但经常出现撤销消息的情况.因此需要一款微信防止消息撤回插件,微信用户可以防止对方撤回消息,看到对方发出的任何消息,妈妈再也 ...
- 【bzoj2743】[HEOI2012]采花
树状数组 #include<algorithm> #include<iostream> #include<cstdlib> #include<cstring& ...
- Python读取大文件(GB)
Python读取大文件(GB) - CSDN博客 https://blog.csdn.net/shudaqi2010/article/details/54017766