本文转自：http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs

Introduction

Filter in Angular JS is a way that will help you to represent your data in View in a certain format. There are many inbuilt filters provided by Angular js that give us the way to format our data in View.  With these inbuilt filters, we can format & show our data in various ways.  Text can be shown in uppercase, lowercase. Date can be also represented in various formats.  All we need to do it is add a "|"  (pipe) after the data.

Example: {{ 'Hello World' | uppercase }}

We can also create custom filter to display our data in a particular way that we want. Let's see how we can create a custom filter. I am going to implement a custom filter, which reverses the input entered in a text box.

How to Create Custom Filters

Hide    Copy Code
//Initialize your ng-app

var myapp = angular.module('MyApp', []);

//Create a Filter

myapp.filter("reversetext", function() {

        //Defining the filter function

         return function(input) {

                 var result = "";

                 input = input || "";

                for (var i=0; i<input.length; i++) {

                       result = input.charAt(i) + result;

                 }

                return result;

         };

});

Now Use the Filter in your View with HTML

Hide    Copy Code
<body ng-app="MyApp">

       <input type="text" ng-model="text" placeholder="Enter text"/>

        <p>Filtered Reverse Input: {{ text | reversetext }}</p>

</body>
 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

[转]How to Create Custom Filters in AngularJs的更多相关文章

  1. How to Create Custom Filters in AngularJs

    http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction Filter ...

  2. Part 20 Create custom service in AngularJS

    Whenever the case changes from lower to upper, a single space character should be inserted. This mea ...

  3. Part 13 Create a custom filter in AngularJS

    Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...

  4. create custom launcher icon 细节介绍

    create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...

  5. How to: Create Custom Configuration Sections Using ConfigurationSection

    https://msdn.microsoft.com/en-us/library/2tw134k3.aspx You can extend ASP.NET configuration settings ...

  6. java中如何创建自定义异常Create Custom Exception

    9.创建自定义异常 Create Custom Exception 马克-to-win:我们可以创建自己的异常:checked或unchecked异常都可以, 规则如前面我们所介绍,反正如果是chec ...

  7. [转]Create Custom Exception Filter in ASP.NET Core

    本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previou ...

  8. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

  9. Create Custom Modal Dialog Windows For User Input In Oracle Forms

    An example is given below to how to create a modal dialog window in Oracle Forms for asking user inp ...

随机推荐

  1. delphi 调用百度地图WEBSERVICE转换GPS坐标

    百度地图的API说明 使用方法 第一步,申请密钥(ak),作为访问服务的依据: 第二步,按照请求参数说明拼写发送http请求的url,注意需使用第一步申请的ak: 第三步,接收返回的数据(json或者 ...

  2. Java50道经典习题-程序44 偶数的素数和

    题目:一个偶数总能表示为两个素数之和.分析:一个偶数可能会有不止一对两个素数之和的情况 例如:20=3+17 20=7+13 import java.util.Scanner; public clas ...

  3. ubuntu - 14.04，配置GOPATH（GO语言开发代码存放目录）

    一,创建GOPATH:选择一个目录或者在我们想要的地方创建一个作为GOPATH的目录,我的GOPATH是:“/home/sunylat/gopath”. 二,配置系统变量:在shell里面输入“sud ...

  4. 从理论认识J2EE

    前言 在学习J2EE这块,看了成套的视频,感觉,感觉,感觉收获不是特别大,没用马老师讲得好,但是多少还是和J2EE打了个招呼,比如J2EE著名的十三个规范,他们有的人说不算什么规范,顶多可以理解为十三 ...

  5. load xml with xls

    you can study xls language in the below link : http://www.w3schools.com/xsl/xsl_languages.asp CSS = ...

  6. Kruskal算法 克鲁斯卡尔

    30行 #include <iostream> #include <algorithm> using namespace std; int f[5001],n,m,ans=0, ...

  7. kuangbin专题十六 KMP&&扩展KMP HDU3294 Girls' research

    One day, sailormoon girls are so delighted that they intend to research about palindromic strings. O ...

  8. IO流图

    1.InputStream类是字节输入流的抽象类,是所有字节输入流的父类,InputStream类具有层次结构如下图所示: 2.Reader类是字符输入流的抽象类,所有字符输入流的实现都是它的子类. ...

  9. COM编程快速入门

    COM编程快速入门 COM编程快速入门 http://www.vckbase.com/index.php/wv/1642   COM是一种跨应用和语言共享二进制代码的方法.与C++不同,它提倡源代码重 ...

  10. pytorch构建优化器

    这是莫凡python学习笔记. 1.构造数据,可以可视化看看数据样子 import torch import torch.utils.data as Data import torch.nn.func ...