Question

使用Angular v1.5我有一个简单的属性过滤器，但我想过滤两个属性。搜索提出了一些自定义过滤器，但这看起来像是一堆代码，只是看一个额外的属性。

在我的下面的示例中，我希望过滤器可以同时使用FirstName和LastName。

Filter Name: <input type="text" ng-model="memberFilter.FirstName" />
    <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>&nbsp;</th>
            </tr>
            <tr ng-repeat="member in members | filter: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 | tel }}</td>
                <td class="text-center"><a href="#/memberDetail/{{ member.MemberId }}">View</a></td>
            </tr>
        </table>
    </div>

我尝试在ng-model中添加一个数组但是没有用：

ng-model="[memberFilter.FirstName,memberFilter.LastName]"

更新问题

我一般都是Angular的新手，前几天刚写了我的第一个自定义过滤器来显示格式化的电话号码。您可以在原始代码中看到我的过滤器，但我更改了＆＃34; tel＆＃34;到＆＃34;电话＆＃34;。这是我在SO上找到的一个，我能够让它发挥作用。所以我假设我可以将搜索过滤器添加到此文件中，而不是为每个过滤器创建一个新的js文件。但是，当我添加它时，我的Angular停止了工作。我以为我添加了它是正确的但我可能在错误的位置有一个分号或者它可能不可能。我仍然没有想出一个在Angular中调试的好方法。

这是我为我的过滤器创建的一个名为filter.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();
        };
    })
    .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，其中添加了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代码更改为：

Filter Name: <input type="text" ng-model="memberFilter" />

和

<tr ng-repeat="member in members | customMemberFilter:memberFilter | orderBy:sortBy:reverse">

Answer 1

解决方案非常简单。

更改此行：

previous()

到此：

$httpBackend.when('GET', '/url').respond({
    mock: 'response'
});

默认情况下，Angular会进行深层属性过滤。由于您创建的对象具有Filter Name: <input type="text" ng-model="memberFilter.FirstName" />属性以用作过滤器，因此您实际上将过滤器限制为目标对象上的该属性。通过使过滤器更通用，Angular将尝试匹配目标对象的任何属性。

更新：当然，这将匹配您的成员对象的所有属性，这可能是不受欢迎的。如果是这种情况，那么，正如您所怀疑的那样，您将不得不编写自定义过滤器。这是你可以写的一种方式：

Filter Name: <input type="text" ng-model="memberFilter" />

然后你会用它：

FirstName

如何轻松过滤多个属性？

1 个答案: