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>

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 F ...

  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. ZOJ1463

    题意:给一个括号字符串,求解最少添加的字符能使整个字符串匹配. 输入: s(未匹配的字符串) 输出: S(匹配后的字符串) 思路:绝壁超级坑的一道题,格式我不想说什么了,特坑,然后就是对给定的字符串, ...

  2. 在ssh框架中注解方式需要注意的几个问题

    1.注解方式的时候 Spring 2.5 引入了 @Autowired 注释,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. 通过 @Autowired的使用来消除 set ,get ...

  3. 樱花雨 www.yinghy.com

    自己刚申请的域名,和主机,以后就用这个来试着做点东西

  4. B/S系统间跨域单点登录设计思路

    基于B/S系统间单点登录 此处说的单点登录的概念,即不同系统公用一个登录界面.一处系统通过登录验证,在接入的各系统均为登录状态.一般有两种情景: 1)  一级域名相同 例如:tieba.baidu.c ...

  5. asp.net 从客户端中检测到有潜在危险的 Request.Form 值错误解

    从客户端(ftbContent="<P><A href="http://l...")中检测到有潜在危险的 Request.Form 值. 说明: 请求验 ...

  6. solr可用于集群的搜索 【转】

    一. SOLR搭建企业搜索平台 运行环境: 运行容器:Tomcat6.0.20 Solr版本:apache-solr-1.4.0 分词器:mmseg4j-1.6.2  词库:sogou-dic 准备工 ...

  7. 【转】 iOS开发数据库篇—SQLite简单介绍

    开始学SQLite啦, 原文: http://www.cnblogs.com/wendingding/p/3868893.html iOS开发数据库篇—SQLite简单介绍 一.离线缓存 在项目开发中 ...

  8. iOS9升级后第三方平台无法分享的问题

    最近升级到了Xcode7,在真机调试中发现在初始化微博SDK时程序Crash. 解决办法从微博官网下一个最新的SDK,替换掉工程中的即可. 2.替换微博最新SDK之后成功运行程序,之后发现微信.QQ. ...

  9. IIS7、IIS6 web.config注册HttpModule

    IIS6注册HttpModule <system.web>     <httpModules>       <add name="..." type= ...

  10. 带计时器的做题器（gui

    新学 1 JCheckBox chckbxA = new JCheckBox("a"); JCheckBox的监听器接口ItemListener,响应方法itemStateChan ...