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. 备份服务器数据（IIS配置备份还原、任务计划、服务列表和APP）

    该脚本可以用来导出IIS配置.任务计划.服务列表和APP,同时支持Windows 2003和2008. #定义备份位置 $iisfolder = "d:\Backup_all\IIS&quo ...

  2. 把自定义类实例存储到LSO

    使用flash.net.registerClassAlias( )方法保留类型信息并把类实例添加到共享对象的data属性上. LSOs 使用特殊的二进制格式,Action Message Format ...

  3. javascript优化

    javaScript是一门解释性的语言.它不像java.C#等程序设计语言.由编译器先进行编译再运行.而是直接下载到用户的客户端进行执行.因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率. ...

  4. 汽车XX网站秒杀抢购代码

    .../////完整抢购代码某网站最近在举办半价秒杀 其实有技巧的 首先可以添加代码 //自动监视回车,直接回车提交document.onkeydown=function(e){var theEven ...

  5. Linux中搭建SVNserver

    一 下载工具 1. subversion-1.6.17.tar.gz 2. subversion-deps-1.6.17.tar.gz 二 解压两个包: 1.在此之前,我已经创建了一个用户svnroo ...

  6. Mac下PHP环境的搭建

    Mac下PHP环境的搭建 目录 Mac下PHP环境的搭建(基于XAMPP) phpmyadmin Mac下PHP环境的搭建(基于XAMPP) 下载XAMPP的Mac版 启动Apache Web Ser ...

  7. docker（4）：coreos+docker+rancher真厉害

    http://blog.csdn.net/freewebsys/article/category/3103827

  8. 提升GDI画图的效率

    假设我们要画一个坐标图,里面可能还需要画网络线.XY各个单位的值.曲线或直线等,可能的函数代码如下: void OnPaint () { CPaintDC dc (this); DrawXY (&am ...

  9. Trace、Debug和TraceSource的使用以及日志设计 .

    [-] Trace 和 Debug区别 什么是Listeners 跟踪开关 使用BooleanSwitch开关 使用TraceSwitch开关 使用TraceSource代替Trace和Debug 设 ...

  10. ajax重写，js方法重新

    重写Jquery的$.ajax方法 (function($){ //备份jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=functio ...