基本介绍

除了使用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——自定义过滤器的更多相关文章

  1. 简述angular自定义过滤器在页面和控制器中的使用

    首先设置自定义过滤器. 定义模块名:angular ? 1 2 3 4 5 6 .module('myApp') .filter('filterName',function(){ return fun ...

  2. angular自定义过滤器在页面和控制器中的使用

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  3. Angular 自定义过滤器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  4. angular自定义过滤器操作实例

    //模块名字var filters = angular.module("customFilter",[]);//过滤器名字filters.filter("uniqueCa ...

  5. angular之自定义过滤器的使用

    自定义过滤器需要使用filter函数,格式如下: filter("filterName',function(){ return function(target,args){ .... } } ...

  6. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  7. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

  8. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  9. AngularJS实现的自定义过滤器简单示例

    本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. STL中常用的c++语法

    函数调用操作(c++语法中的左右小括号)可以被重载,STL的特殊版本都以仿函数形式呈现.如果对某个class进行operator()重载,它就成为一个仿函数. 仿函数(functor),就是使一个类的 ...

  2. C# .NET using ManagementObjectSearcher提示缺少引用怎么办

    在下图中,即使引用了System.Management还是会出现报错   其实只要添加这条引用就可以了

  3. 用yarn替代npm

    最近,从npm拉取vue-cli总失败,后来干脆直接用yarn 全局安装yarn(官网首推用系统包安装,更加安全) npm i yarn -g 用yarn添加全局vue-cli yarn global ...

  4. iOS DeepLinkKit使用简单介绍

    Update: 2017.04.08 添加了使用iOS DeepLinkKit使用Universal Links的部分 ---------------------------------------- ...

  5. Write a program that gives count of common characters presented in an array of strings..(or array of

    转自出处 Write a program that gives count of common characters presented in an array of strings..(or arr ...

  6. MyEclipse,Eclipse注释规范模板

    注释的作用:myeclipse中java文件头注释格式设置,最终可用于javadoc.exe生成API文档,同时提高了代码的可读性 设置方法: windows->preferences-> ...

  7. JavaScript基础 -- 定时器

     js 定时器有以下两个方法: setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. set ...

  8. servlet container:tomcat jetty and undertow

    1 spring boot内嵌容器支持tomcat.jetty和undertow 但是undertow性能最好,详见: https://examples.javacodegeeks.com/enter ...

  9. Message: unknown error: Element is not clickable at point

    Message: unknown error: Element is not clickable at point google chrome - Debugging "Element is ...

  10. 有意思的RTL函数RegisterClass(在持久化中,你生成的一个新类的对象,系统并不知道他是如何来的,因此需要你注册)good

    例子1:Delphi中使用纯正的面向对象方法(这个例子最直接) Delphi的VCL技术使很多程序员能够非常快速的入门:程序员门只要简单的拖动再加上少量的几个Pascal语句,呵呵,一个可以运行得非常 ...