本文转自：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. 数据结构_成绩查询_cjcx

    问题描述 录入 n 个学生的成绩,并查询.★数据输入第一行输入包括 n. m(1<=n<=50,000,1<=m<=100,000)两个数字.接下来 n 行,每行包含名字和成绩 ...

  2. fiddler----APP弱网测试

    转自:http://www.51testing.com/html/01/n-3727001.html APP弱网模拟测试 移动端测试区别于PC端测试的一点就是网络的多变性:不同的网络环境和网络制式的差 ...

  3. 无废话MVC入门教程笔记

    自学mvc,看了园子里李林峰写的李林峰写的无废话MVC入门教程笔记,现在有的平时忽略的或是不太清楚的点记下来 1,Html.DropDownList //服务端写法 @{ //下拉列表的值 List& ...

  4. Unity UGUI 原理篇(二)：Canvas Scaler 縮放核心

    https://blog.csdn.net/gz_huangzl/article/details/52484611 Canvas Scaler Canvas Scaler是Unity UI系統中,控制 ...

  5. ASP前端控件设置只读不要用enabled

    会导致后台取不到这个控件的值,应该用readonly

  6. sql_trace基本用法

    sql_trace是oracle提供的一个非常好的跟踪工具,主要用来检查数据库的异常情况,通过跟踪数据库的活动,找到有问题的语句. 一.概述:    SQL_TRACE是Oracle的一个非常强大的工 ...

  7. P3348 [ZJOI2016]大森林

    \(\color{#0066ff}{ 题目描述 }\) 小Y家里有一个大森林,里面有n棵树,编号从1到n.一开始这些树都只是树苗,只有一个节点,标号为1.这些树都有一个特殊的节点,我们称之为生长节点, ...

  8. P4196 [CQOI2006]凸多边形 半平面交

    \(\color{#0066ff}{题目描述}\) 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. \(\color{#0066f ...

  9. luogu2513 逆序对数列

    我们令\(f[i][j]\)表示\(i\)的全排列中,逆序数为\(j\)的个数. 我们考虑在\(i-1\)的排列中插入\(i\).\(k\)是这次更新会导致增加多少逆序数. 则\(\begin{ali ...

  10. Express全系列教程之(十)：jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...