本文转自：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. TinkerPop中的遍历：图的遍历步骤(3/3)

    48 Project Step project() 步骤(map)将当前对象投射到由提供的标签键入的Map<String,Object>中. gremlin> g.V().out(' ...

  2. 20169219《Linux内核原理与分析》第十一周作业

    设备与模块 关于设备驱动和设备管理的四种内核成分: 设备类型:为了统一普通设备的操作所采用的分类. 模块:用于按需加载和卸载目标码的机制. 内核对象:内核数据结构中支持面向对象的简单操作,还支持维护对 ...

  3. C语言结构体--位域

    有些数据在存储时并不需要占用一个完整的字节,只需要占用一个或几个二进制位即可.比如开关只有通电和断电两种状态,用 0 和 1 表示足以,也就是用一个二进位.正是基于这种考虑,C语言又提供了一种叫做位域 ...

  4. java 的exception throw try catch

    import java.util.*; public class MyException extends Exception { private static final Exception Exce ...

  5. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  6. c# sql省市联动

    C# sql省市联动 USE [Book] GO ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ...

  7. 与HDFS交互- By java API编程

    环境(ubuntu下) jdk eclipse jar(很烦,整了很久才清楚) - 导包方法 查看:https://www.cnblogs.com/floakss/p/9739030.html ()” ...

  8. 我的iphone不能被虚拟机识别怎么办

    我的iphone不能被虚拟机识别怎么办 听语音 | 浏览:3890 | 更新:2015-11-04 15:28 | 标签:iphone vmware ios 1 2 3 4 5 6 分步阅读 特大喜讯 ...

  9. Git分支管理命令

    1. 创建新分支 1)创建新仓库 git init git add README.md git commit -m "readme.md" git remote add origi ...

  10. BS总结篇­

    学习Web开发差不多三个月了,这个阶段的学习给自己带来的更多的是视觉的盛宴.从CS的世界一下子来到了BS的地盘,心中除了惊喜还是惊喜.在这里还是希望自己对这三月所学的东西做一个阶段性的总结. 话不多说 ...