向我的自定义过滤器添加第二个过滤器似乎打破了Angular

Question

我创建了我的第一个自定义过滤器，以便在前一天显示电话号码。我从过滤器上取下了SO，并且能够让它工作。现在我想添加第二个自定义过滤器来搜索多个参数（成员的FirstName和LastName）。我从另一个成员那里获得了过滤器，看起来它会起作用。但是，当我将过滤器添加到我现有的filters.js文件时，它似乎导致我的Angular不起作用。任何人都知道我是正确地添加了这个还是我错过了什么？

以下是名为filters.js的文件中的原始过滤器。

angular.module('appFilters', [])
    .filter('phone', function () {
        return function (phone) {
            if (!phone) { return ''; }

            var value = phone.toString().trim().replace(/^\+/, '');

            if (value.match(/[^0-9]/)) {
                return phone;
            }

            var country, city, number;

            switch (value.length) {
                case 10: // +1PPP####### -> C (PPP) ###-####
                    country = 1;
                    city = value.slice(0, 3);
                    number = value.slice(3);
                    break;

                case 11: // +CPPP####### -> CCC (PP) ###-####
                    country = value[0];
                    city = value.slice(1, 4);
                    number = value.slice(4);
                    break;

                case 12: // +CCCPP####### -> CCC (PP) ###-####
                    country = value.slice(0, 3);
                    city = value.slice(3, 5);
                    number = value.slice(5);
                    break;

                default:
                    return phone;
            }

            if (country == 1) {
                country = "";
            }

            number = number.slice(0, 3) + '-' + number.slice(3);

            return (country + " (" + city + ") " + number).trim();
        };
    });

这里我添加了搜索过滤器。我刚刚在最后一个分号前面来了，并在那里添加了过滤器。看起来它对我来说是正确的位置。

angular.module('appFilters', [])
    .filter('phone', function () {
        return function (phone) {
            if (!phone) { return ''; }

            var value = phone.toString().trim().replace(/^\+/, '');

            if (value.match(/[^0-9]/)) {
                return phone;
            }

            var country, city, number;

            switch (value.length) {
                case 10: // +1PPP####### -> C (PPP) ###-####
                    country = 1;
                    city = value.slice(0, 3);
                    number = value.slice(3);
                    break;

                case 11: // +CPPP####### -> CCC (PP) ###-####
                    country = value[0];
                    city = value.slice(1, 4);
                    number = value.slice(4);
                    break;

                case 12: // +CCCPP####### -> CCC (PP) ###-####
                    country = value.slice(0, 3);
                    city = value.slice(3, 5);
                    number = value.slice(5);
                    break;

                default:
                    return phone;
            }

            if (country == 1) {
                country = "";
            }

            number = number.slice(0, 3) + '-' + number.slice(3);

            return (country + " (" + city + ") " + number).trim();
        };
    })
    .filter('customMemberFilter', function () {
        return function (memberList, query) {
            // make sure a query value was passed
            if (query) {
                query = query.toLowerCase();
                var out = [];
                angular.forEach(memberList, function (member) {
                    if ((member.FirstName.toLowerCase().includes(query)) ||
                        (member.LastName.toLowerCase().includes(query))) {
                        out.push(member);
                    }
                });
                return out;
            } else {
                return memberList;
            }
        }
    });

这是我的app.js，我将filter.js（称为appFilters）添加到模块中。

(function () {

    var app = angular.module('troopApp', ['ngRoute','appFilters']);      //('moduleName', [array of injected modules])

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'MembersController',
                templateUrl: 'app/views/members.html'
            })
            .when('/memberDetail/:memberId', {
                controller: 'MemberDetailController',
                templateUrl: 'app/views/memberDetail.html'
            })
            .otherwise({ redirectTo: '/'});
    });

}());

这是我的HTML。

<div class="container">
    <h2>Members</h2>
    <p />
    Filter Name: <input type="text" ng-model="memberFilter" />
    <p />
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
            <tr class="info">
                <th ng-click="doSort('FirstName')">First Name</th>
                <th ng-click="doSort('LastName')">Last Name</th>
                <th ng-click="doSort('EmailPrimary')">Email</th>
                <th ng-click="doSort('PhonePrimary')">Phone</th>
                <th>Is Scout</th>
                <th>&nbsp;</th>
            </tr>
            <tr ng-repeat="member in members | customMemberFilter:memberFilter  | orderBy:sortBy:reverse">
                <td>{{ member.FirstName }}</td>
                <td>{{ member.LastName }}</td>
                <td><a href="mailto:{{ member.EmailPrimary }}">{{ member.EmailPrimary }}</a></td>
                <td class="text-center">{{ member.PhonePrimary | phone }}</td>
                <td>{{ member.IsScout }}</td>
                <td clas="text-center"><a href="#/memberDetail/{{ member.MemberId }}">View</a></td>
            </tr>
        </table>
    </div>
</div>