Custom filter in AngularJS
1. Is a function that returns a function
2. Use the filter function to create a custom filter

Let us understand creating custom filter with an example.

Script.js : In the example below we are using the filter function to create a custom filter that converts integer values 1, 2, 3 to Male, Female and Not disclosed respectively.
gender is the name of the filter. With in the filter function we have
an anonymous function that returns another anonymous function. The input
parameter for the inner anonynous function is the gender integer value.
The switch statement in the function returns the corresponding string
value.

 var app = angular

        .module("myModule", [])

        .filter("gender", function () {

            return function (gender) {

                switch (gender) {

                    case 1:

                        return "Male";

                    case 2:

                        return "Female";

                    case 3:

                        return "Not disclosed";

                }

            }

        })

        .controller("myController", function ($scope) {

            var employees = [

                { name: "Ben", gender: 1, salary: 55000 },

                { name: "Sara", gender: 2, salary: 68000 },

                { name: "Mark", gender: 1, salary: 57000 },

                { name: "Pam", gender: 2, salary: 53000 },

                { name: "Todd", gender: 3, salary: 60000 }

            ];

            $scope.employees = employees;

        });

HtmlPage1.html : In the view, we use the custom gender filter like any other angular built-in filter with a pipe character.

 <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Gender</th>

                    <th>Salary</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="employee in employees">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender | gender}} </td>

                    <td> {{ employee.salary  }} </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

In the above example we have the custom filter in Script.js file. In a real world application you may the custom filters in a separate script file (Filters.js for example). To do this reference the module object and use the filter function.

Filter.js : The custom filter is moved to a separate file

 /// <reference path="Script.js" />

app.filter("gender", function () {

    return function (gender) {

        switch (gender) {

            case 1:

                return "Male";

            case 2:

                return "Female";

            case 3:

                return "Not disclosed";

        }

    }

});

Script.js : After moving the filter function to a separate Filters.js file, the Script.js file will now look as shown below.

 /// <reference path="angular.min.js" />

var app = angular

        .module("myModule", [])

        .controller("myController", function ($scope) {

            var employees = [

                { name: "Ben", gender: 1, salary: 55000 },

                { name: "Sara", gender: 2, salary: 68000 },

                { name: "Mark", gender: 1, salary: 57000 },

                { name: "Pam", gender: 2, salary: 53000 },

                { name: "Todd", gender: 3, salary: 60000 }

            ];

            $scope.employees = employees;

        });

HtmlPage1.html : The only change required in the view is to reference the Filters.js file

<script src="Scripts/Filters.js"></script>

Part 13 Create a custom filter 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. [转]How to Create Custom Filters in AngularJs

    本文转自:http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction F ...

  3. Part 20 Create custom service in AngularJS

    Whenever the case changes from lower to upper, a single space character should be inserted. This mea ...

  4. [转]How do you create a custom AuthorizeAttribute in ASP.NET Core?

    问: I'm trying to make a custom authorization attribute in ASP.NET Core. In previous versions it was ...

  5. How could I create a custom windows message?

    [问题] Our project is running on Windows CE 6.0 and is written in C++ . We have some problems with the ...

  6. [Angular] Create a custom validator for reactive forms in Angular

    Also check: directive for form validation User input validation is a core part of creating proper HT ...

  7. [Angular] Create a custom validator for template driven forms in Angular

    User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...

  8. matlab中fspecial Create predefined 2-D filter以及中值滤波均值滤波以及高斯滤波

    来源: 1.https://ww2.mathworks.cn/help/images/ref/fspecial.html?searchHighlight=fspecial&s_tid=doc_ ...

  9. how to create react custom hooks with arguments

    how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...

随机推荐

  1. ClassRequestHandler or VendorRequestHandler wIndex must be less than NumIFs

    P1_ro:20000EEA ClassRequestHandler ; CODE XREF: USB__HandleSetup+38j P1_ro:20000EEA LDRB R0, [R4,#4] ...

  2. 拖动窗体FormBorderStyle属性为None的窗体移动

    winform窗体的样式很单一,不够漂亮,往往我们需要对窗体进行重写,但是我们又要保留在重写前窗体本身带的功能,例如拖动窗体的头进行移动之类的. 一下方式可以实现该方法: [DllImport(&qu ...

  3. 【M9】利用destructors避免泄漏资源

    1.在堆上获取的动态资源,用户忘记delete,或者由于异常导致没有没执行到delete,都会造成资源泄漏. 2.我们知道,栈上的对象,离开作用域,必定要执行析构方法.即使抛出异常,会堆栈回滚,保证已 ...

  4. hdu 4859 海岸线 最小割

    海岸线 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4859 Description 欢迎来到珠海! 由于土地资源越来越紧张,使得许多海滨城市都只能 ...

  5. iOS 设计模式之抽象工厂

    设计模式是程序提升的必备知识,这里说下iOS怎样实现抽象工厂设计模式.本文是看过oc编程之道这本的抽象工厂这章后写出的,假设不明确原理能够看看那本书. TestView.h首先创建一个视图 // // ...

  6. LFS7.4编译笔记（3）

    在第一部分,我们编译了一个工具链及临时系统,然后在第二部分我们chroot到/mnt/lfs下面,利用临时系统的工具编译了我们最终的LFS系统.不过此时,我们的LFS系统还是不完整的,因为我们还没有安 ...

  7. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  8. excel VLOOKUP函数的用法

    VLOOKUP函数是Excel中几个最重函数之中的一个,为了方便大家学习,兰色幻想特针对VLOOKUP函数的使用和扩展应用,进行一次全面综合的说明.本文为入门部分 一.入门级 VLOOKUP是一个查找 ...

  9. MySQL auto_increment实现

    http://www.cnblogs.com/xpchild/p/3825309.html 运维的时候,经常遇到auto_increment的疑惑: 机器异常crash,重启后id回退的问题 性能考虑 ...

  10. Nop关键技术点概述

    数据访问层 Nop.Data项目包含用于与数据库及其它数据存储交互的类和功能.Nop.Data类库帮助将数据访问逻辑和业务对象分离.Nop使用的是Entity Framework Code First ...