[转]How to Create Custom Filters in AngularJs

本文转自: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)

时间: 2024-07-30 03:20:17

[转]How to Create Custom Filters in AngularJs的相关文章

Part 20 Create custom service in AngularJS

Whenever the case changes from lower to upper, a single space character should be inserted. This means the string "AngularVideoTutorial" should be converted to"Angular Video Tutorial". Let us first see, how to achieve this without usin

Create Custom Modification Form In VS 2012-Part2

1.SPWorkflowModification ContextData is XMLSerialized as String. 2.Get SPWorkflowModification ContextData in modification page protected void GetContexData()        {            SPWeb currentWeb = SPContext.Current.Web;            string strWorkflowI

Create Custom Modification Form In VS 2012-Part1

Step1.Add EventHandlingScope Activity Under OnWorkflowActivated Step2.Add SequenceActivity In EventHandlingScope Activity Step3.Add EnableWorkflowModification Activity a.Bind [ContextData] to a new field b.Set [Colorrelation Token] as "Modification&q

java中如何创建自定义异常Create Custom Exception

9.创建自定义异常 Create Custom Exception  (视频下载) (全部书籍) 马克-to-win:我们可以创建自己的异常:checked或unchecked异常都可以, 规则如前面我们所介绍,反正如果是checked异常,则必须或者throws,或者catch.到底哪个好,各路架构师大神的意见是50对50.见我本章后面的附录.sun公司开始说,checked异常可以使你的系统异常语义表达很清楚.但很多人经过一段时间的实践后,马上表示了异议.checked异常是java独有的,

[转]Create Custom Exception Filter in ASP.NET Core

本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previous article I explained how errors in an ASP.NET Core web application can be dealt with  using middleware. I also mentioned that time that you can also

[Angular] Create custom validators for formControl and formGroup

Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we want to validate it: form = this.fb.group({ store: this.fb.group({ branch: ['', [Validators.required, StockValidators.checkBranch]], code: ['', Valida

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 input and return the value to any text item. The following is the screen shot of this demo and this form could be downloaded from the following link: Cus

[Tailwind] Create Custom Utility Classes in Tailwind

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs. Update gulpfile.js: const gulp = require("gulp"); const postcss

[Angular2 Form] Create custom form component using Control Value Accessor

//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators} from '@angular/forms'; @Component({ selector: 'switch-control', templateUrl: './switch-control.componen