本文转自：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. MySQL数据导入导出方法与工具mysqlimport

    MySQL数据导入导出方法与工具mysqlimport<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office ...

  2. [转]MySQL时间与字符串相互转换

    转至:https://www.cnblogs.com/wangyongwen/p/6265126.html 时间.字符串.时间戳之间的互相转换很常用,但是几乎每次使用时候都喜欢去搜索一下用法:本文整理 ...

  3. 《Linux内核设计与实现》读书笔记（四）- 进程的调度

    主要内容: 什么是调度 调度实现原理 Linux上调度实现的方法 调度相关的系统调用 1. 什么是调度 现在的操作系统都是多任务的,为了能让更多的任务能同时在系统上更好的运行,需要一个管理程序来管理计 ...

  4. asp 控件定时器 局部刷新

    <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePan ...

  5. C#中IDisposable的用法-垃圾回收

    在Net中,由GC垃圾回收线程掌握对象资源的释放,程序员无法掌控析构函数的调用时机.对于一些非托管资源,比如数据库链接对象等,需要实现IDisposable接口进行手动的垃圾回收.那么什么时候使用Id ...

  6. c#打开关闭进程

    private const string FileName = "test.exe"; //进程名称不带扩展名 private const string ProcessName = ...

  7. 使用Privoxy转化SSH到HTTP代理

    为什么要进行转换? 一般我们很容易找到通过SOCKS5代理的方法,如SSH,但是很多浏览器或是软件只支持HTTP方式,所以就需要将我们的SSH代理模式转为HTTP代理方式  如何转换? 使用Privo ...

  8. Lucene 全文检索 Lucene的使用

    Lucene  全文检索  Lucene的使用 一.简介: 参考百度百科: http://baike.baidu.com/link?url=eBcEVuUL3TbUivRvtgRnMr1s44nTE7 ...

  9. Chrome 67 以后版本无法离线安装crx插件

    原文链接:https://blog.csdn.net/wanwuguicang/article/details/80716178 升级了Chrome后无法离线安装扩展 如图: 谷歌自Chrome 67 ...

  10. docker 部署net core程序 curl访问地址 提示 Connection reset by peer

    最近研究netcore 部署到docker上.在参考https://www.cnblogs.com/subendong/p/8992285.html教程之后,部署成功.但是curl访问对应的主机端口地 ...