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. c语言操作符 “++”另类行为

    正常情况下,我们使用++ int a = 1; a++; printf(“%d”,a); // 2; 很简单没什么好说的. #include <stdio.h>   int main() ...

  2. IPv6 相关的工作简介

    这里说明下,仅仅是IPv6在开发板上的相关的工作简介,没有很详细,都是自己一边积累,一边实践的.能帮助其他人最好,也算是给自己做个备忘录. 一.首先说下DHCPv6相关的.这里我使用的是DHCP6s. ...

  3. 深入理解Oracle索引(25)：一招鲜、吃遍天之单字段索引创建思路

    本文较短.不过实用性很好.还是记录之.          ㈠ 先别看SQL语句.看执行计划.挑出走全表扫的表 ㈡ 回头看SQL语句.分析上述表的约束字段有哪些.检查各个约束字段的索引是否存在 ㈢ 选择 ...

  4. Visual Studio 2015 和 Apache Cordova

    英文原版:http://www.codeproject.com/Articles/860150/Visual-Studio-and-Apache-Cordova 在开始前,问一下自己下面这些问题: 熟 ...

  5. ssh 命令行通过私钥登录其它设备

    ssh -i root(私钥文件) root@IP (被访问的服务器IP) 这里备份一下了

  6. Codeforces Gym 100231B Intervals 线段树+二分+贪心

    Intervals 题目连接: http://codeforces.com/gym/100231/attachments Description 给你n个区间,告诉你每个区间内都有ci个数 然后你需要 ...

  7. HDU 5601 N*M bulbs 找规律

    N*M bulbs 题目连接: http://codeforces.com/contest/510/problem/C Description NM个灯泡排成一片,也就是排成一个NM的矩形,有些开着, ...

  8. freemarker中的round、floor和ceiling数字的舍入处理

    freemarker中的round.floor和ceiling数字的舍入处理 1.简易说明 (1)round:四舍五入 (2)floor:向下取整 (3)ceiling:向上取整 2.举例说明 < ...

  9. sqlserver 各种判断是否存在(表名、函数、存储过程等)

    库是否存在 if exists(select * from master..sysdatabases where name=N'库名') print 'exists'elseprint 'not ex ...

  10. MySQL通用优化 叶金荣！！！

    http://mp.weixin.qq.com/s?__biz=MjM5NDE0MjI4MA==&mid=208777870&idx=1&sn=6efddd6283e4deb3 ...