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. Web字体工具整理，网页图标字体以及使用方法整理

    常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...

  2. (转)一步一步学习PHP(3)——函数

    相信每个人在学习PHP之前至少都有着一定的C语言,或者是C++/Java/C#等其他语言的基础,所以在这里也不从头开始说起,只是来谈谈PHP方法的独特之处. 1. 方法概述 首先,写一个最简单的函数, ...

  3. 运行phpize时出现：Cannot find autoconf. Please check your autoconf installation

    运行/usr/local/webserver/php/bin/phpize时出现:Configuring for:PHP Api Version: 20041225Zend Module Api No ...

  4. iOS几种简单有效的数组排序方法

    第一种,利用数组的sortedArrayUsingComparator调用 NSComparator ,obj1和obj2指的数组中的对象 NSComparator cmptr = ^(id obj1 ...

  5. 关于Core Data的一些整理（一）

    关于Core Data的一些整理(一) 在Xcode7.2中只有Mast-Debug和Single View中可以勾选Use Core Data 如果勾选了Use Core Data,Xcode会自动 ...

  6. UIView -> image & 本地时间获取

    //UIView 转换为图片 UIGraphicsBeginImageContext(self.rootsView.bounds.size); [_rootsView.layer renderInCo ...

  7. Python网页爬虫（一）

    很多时候我们想要获得网站的数据,但是网站并没有提供相应的API调用,这时候应该怎么办呢?还有的时候我们需要模拟人的一些行为,例如点击网页上的按钮等,又有什么好的解决方法吗?这些正是python和网页爬 ...

  8. Java学习----对象的状态和行为

    1.什么是对象 对象是已知的事物 对象会执行动作 类是对象的蓝图 2.对象的属性和状态 使用变量来描述 private String name; private int age; private St ...

  9. 跨控制器操作-thinkphp

    用A函数 或者 $use=new IndexController(); A跨控制器 $data->A("Admin/Index")//admin下面的index控制器 $da ...

  10. 关于canvas 易忘属性

    globalAlpha=1//表示全局的一个透明度值 默认值是1 globalCompositeOperation // 默认值="source-over"(Default)