本文转自：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. 多线程学习-基础（十三）(学习参考·网摘) ArrayBlockingQueue源代碼解析（base jdk 1.8）

    前记: 这个得首先声明一下,以下大部分内容均参考于:https://blog.csdn.net/wx_vampire/article/details/79585794,本随笔只作为学习作用,侵权删! ...

  2. Unknown storage engine 'InnoDB'

    报错情况:在导入数据时候发现找不到InnoDB这个错误,之前查看博客时候明白了IsAsm数据库和InnoDB这两个的区别了. 解决方案: 尝试一:将my.ini配置文件的isasm改成InnoDB.这 ...

  3. C#中的多线程 - 高级多线程

    1非阻塞同步Permalink 之前,我们描述了即使是很简单的赋值或更新一个字段也需要同步.尽管锁总能满足这个需求,一个存在竞争的锁意味着肯定有线程会被阻塞,就会导致由上下文切换和调度的延迟带来的开销 ...

  4. eval实例

    .... var sel_MedicineType = 'sel_MedicineType' + lastIndex; eval(sel_MedicineType + "= new C_Se ...

  5. 【Python】python对象与json相互转换

    转自:http://blog.csdn.net/leilba/article/details/50654256 # -*- coding: UTF-8 -*- import json #自定义类 cl ...

  6. [51nod1188]最大公约数之和 V2（筛法）

    题面 传送门 题解 口胡的整除分块单次询问\(O(\sqrt{n})\)的做法居然\(T\)了?那还是好好看正解吧-- 首先我们枚举\(j\),求对于每个\(j\)有所有\(i<j\)的\(\g ...

  7. 10.18 NOIP2018提高组模拟题（二）

    大水题 1.咒语 (curse.pas/c/cpp) [题目描述] 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路.正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条. ...

  8. kuangbin专题十六 KMP&&扩展KMP HDU2594 Simpsons’ Hidden Talents

    Homer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had. Marg ...

  9. i++操作非原子的验证代码

    package incre; public class Incre { public static void main(String[] args) { class Count implements ...

  10. STP-6-快速生成树协议-新端口角色，状态和类型以及新链路类型

      IEEE 802.1w快速生成树协议(RSTP)增强了802.1D标准,在设计合理的网络中收敛时间远少于1秒.   端口状态从5个减少到3个 丢弃状态是在端口刚启用时的默认状态,边界端口除外,它的 ...