基本介绍

除了使用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. 条款八: 写operator new和operator delete时要遵循常规

    自己重写operator new时(条款10解释了为什么有时要重写它),很重要的一点是函数提供的行为要和系统缺省的operator new一致.实际做起来也就是:要有正确的返回值:可用内存不够时要调用 ...

  2. C++中使用Json的方法

    使用 C++ 处理 JSON 数据交换格式 一.摘要 JSON 的全称为:JavaScript Object Notation,顾名思义,JSON 是用于标记 Javascript 对象的,JSON官 ...

  3. Zabbix 监控服务器

    Zabbix 操作系统 :CentOS7.5 两台服务器: server端:192.168.206.6 client 端: 192.168.206.3 zabbix : 4.0 mariiadb : ...

  4. 工作总结 for 另类写法 循环加时间 集合合并 也是用的 static class Enumerable (IEnumerable<T>的扩展方法) (IEnumerable<T> 的 工具类) (所有集合 数组都实现IEnumerable<T>)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. AutoreleasePool 分析

    前言 AutoreleasePool自己主动释放池,对于自己主动释放对象的作用怎样? 释放池中的自己主动释放对象什么时候会被释放? MRC环境下 场景1 NSString *string_var_ = ...

  6. go语言--time.After

    go语言--time.After https://blog.csdn.net/cyk2396/article/details/78873396 1.源码分析: // After waits for t ...

  7. SQL Server2012 T-SQL基础教程--读书笔记(1-4章)

    SQL Server2012 T-SQL基础教程--读书笔记(1-4章) SqlServer T-SQL 示例数据库:点我 Chapter 01 T-SQL 查询和编程背景 1.3 创建表和定义数据的 ...

  8. IntelliJ IDEA Tomcat配置

    解决方法: 下载地址:http://archive.apache.org/dist/tomcat/tomcat-connectors/native

  9. nrm -- NPM registry 管理工具

    https://cnodejs.org/topic/5326e78c434e04172c006826 cnpm:http://npm.taobao.org/

  10. Eclipse出现Class Not Found异常时可以参考我所知道的一个方案

    如过你出现Class Not Found异常,可以参考以下这个解决方案 打开Properties for projectName面板-->Deploment Assembly--:查看有没有缺失 ...