按AngularJS中名字的第一个字母过滤人员列表

Filter list of people by first letter of first name in AngularJS

本文关键字：过滤 列表 AngularJS 第一个      更新时间：2023-09-26

我试图在AngularJS中继器中根据人名的起始字母过滤一个人员列表。

中继器如下：

<li ng-repeat="person in people | orderBy: 'firstname' | firstLetter:'firstname':'A'">
    <a ui-sref="people.details({ personId: {{person.id}} })">
        <span class="list__icon"><img src="img/avatar.png"></span>
        <span class="list__text">
            <span class="list__text__name">{{person.firstname}} <b>{{person.lastname}}</b></span>
        </span>
    </a>
</li>

所以我按名字订购，然后使用一个名为firstLetter:的自定义过滤器

.filter('firstLetter', function () {
    return function (input, letter) {
        input = input || [];
        var out = [];
        input.forEach(function (item) {
            if (item.charAt(0).toLowerCase() == letter) {
                out.push(item);
            }
        });
        return out;
    }
});

然而，我得到一个错误，charAt不是一个函数。。。我是否错误地将参数传递给了筛选器？

您的firstLetter筛选器缺少一个附加参数。第一个参数input指的是正在重复的数组（在本例中为人）。第二个参数letter实际上应该是过滤器声明的第三个参数。

.filter('firstLetter', function () {
    return function (input, key, letter) {
        input = input || [];
        var out = [];
        input.forEach(function (item) {
            console.log('item: ', item[key][0].toLowerCase());
            console.log('letter: ', letter);
            if (item[key][0].toLowerCase() == letter.toLowerCase()) {
                out.push(item);
            }
        });
        return out;
    }
});;

是的，您错误地传递了要筛选的参数。默认情况下，过滤输入，即您的数组将作为第一个参数传递。

.filter('firstLetter', function () {
    return function (objects, input, letter) {
        var out = [];
        angular.forEach(objects,object){
            var item = object[input];
            if (item.charAt(0).toLowerCase() == letter.toLowerCase()) {
                out.push(object);
            }
        });
        return out;
    }
});
相关文章：