zoukankan      html  css  js  c++  java
  • 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

    //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>
  • 相关阅读:
    保持页面上滚动条原来位置
    ASP.NET页面刷新的实现方法
    绝对定位下的控件动态添加操作
    实现页面打开后滚动到最底端的效果
    获得页面下所有的控件
    获得sql列名
    PropertyUtils.getProperty和PropertyUtils.setProperty的用法详解
    Javascript 第三章
    Javascript 第五章
    Javascript 第六章
  • 原文地址:https://www.cnblogs.com/facial/p/5474407.html
Copyright © 2011-2022 走看看