码迷,mamicode.com
首页 > Web开发 > 详细

[转]How to Create Custom Filters in AngularJs

时间:2015-05-08 10:47:39      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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

//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

<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

标签:

原文地址:http://www.cnblogs.com/freeliver54/p/4486982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!