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. grunt入门之grunt watch的使用

    watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以 ...

  2. YOUYOU深入学习Ganglia之三（gmetad的软件架构）

    Ganglia这个东西,目前的情况是测试的多,真正在数据中心部署过的人少:使用的多,真正能了解其代码架构的人少.这里根据我的经验,分解一下ganglia的gmetad的软件架构,欢迎大家交流. 上面的 ...

  3. 【PAT】1029. Median (25)

    Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...

  4. [CSS3 Animation] TweenMax.staggerTo()

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. UITableViewController

    UITableViewController 目录 概述 UITableView UITableViewCell 与UITableViewController相关的代理 UITableViewDataS ...

  6. Browser 與 Server 持續同步的作法介紹 (Polling, Comet, Long Polling, WebSocket)长连接

    對 Comet 的懵懂 記得兩年多前,第一次看到 Gmail 中的 GTalk 覺得很好奇:「咦?線上聊天且是 Google 的熱門系統,只用傳統的 AJAX 應該會操爆伺服器吧?」很幸運的,當時前公 ...

  7. Cows

    Farmer John's cows have discovered that the clover growing along the ridge of the hill (which we can ...

  8. Linux常用命令速查备忘

    Linux常用命令速查备忘   PS:备忘而已,详细的命令参数说明自己man 一. 启动,关机,登入,登出相关命令 [login] 登录 [logout] 登出 [exit] 登出 [shutdown ...

  9. 1.7.3 Relevance-相关性

    1. 相关性 相关性是一个查询响应满足用户搜索信息的一个度(程度). 查询响应的相关性主要依赖于上下文的查询.单个搜索应用程序可以通过用户的不同需求和期望被用来在不同的上下文.例如,气候数据的搜索引擎 ...

  10. solrj:org.apache.solr.common.util.NamedList.java

    package org.apache.solr.common.util; import java.io.Serializable; import java.util.ArrayList; import ...