Javascript 用字母过滤列表

我有一个列表显示在表中，我需要用名字的第一个字母过滤结果，在列表上方我有一个字母a B C D等等。 单击后，字母列表将按其名字进行筛选

例如：列表详细信息为

Apple Boy Bridge

---

单击

A

，将显示

Apple

，而不是水果，我必须过滤国家名称以显示其销售代表：

'use strict';

angular.module('sodemo')
.filter('firstLetter', function () {
    return function (input, letter) {
        input = input || [];
        var out = [];
        input.forEach(function (item) {
            //console.log("current item is", item, item.charAt(0));
            if (item.charAt(0).toLowerCase() == letter) {
                out.push(item);
            }
        });
        return out;
    }
});

生成包含字母表中字母的数组的快速方法：

$scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

以及视图，如果字母处于活动状态，该视图也会设置不同的背景颜色：

<button type="button" class="btn-alphabet btn btn-default" ng-repeat="letter in alphabet" ng-click="setActiveLetter(letter)" ng-class="{'btn-primary': letter==activeLetter}">{{letter}}</button>

---

这个问题已经得到了回答，但我在寻找答案时遇到了这个问题，而且我对angular来说是个新手，我发现它有点难以正确阅读和理解。然后，我发现本教程解释了过滤器及其一般工作原理，在他的示例中，他创建了一个“StartWithLetter”过滤器，我发现它非常有用：

我想我会把它贴出来，以防有人像我一样理解困难。

<ul>
 <li><a href="javascript:void(null)" ng-click="letterFilter = {firstName:  'A'}">A</a></li>
 <li><a href="javascript:void(null)" ng-click="letterFilter = {firstName: 'B'}">B</a></li>
 <li><a href="javascript:void(null)" ng-click="letterFilter = {firstName: 'C'}">C</a></li>
</ul>
 <ul>
<li ng-repeat="name in list | filter:letterFilter">
{{name.firstName}}
</li>
</ul>







{{name.firstName}

试试上面的代码，这很容易实现：

这很旧，但使用angular的过滤器可能会有所帮助

定义一个表达式，如下所示：

// Filter Expression
this.filterActive = function(value){
    if (self.active) {
        return value.charAt(0).toLowerCase() === self.active;
    }
    return true;
}

然后在html中：

<ul>
    <li ng-repeat="country in ctrl.countries | filter:ctrl.filterActive" ng-bind="country"></li>
</ul>

Hi Sikander我想这将回答您的上述问题。解决方案不要过滤名字的第一个字母。但仅适用于整个word中可用的字母。在ng上单击可使用名为

setActiveLetter（字母）

的函数，但实际上不列出该函数。在控制器中使用它：

$scope.setActiveLetter=function（letter）{$scope.activeLetter=letter；}希望这能帮助看到这一点的人。奇妙的解决方案！
// Filter Expression
this.filterActive = function(value){
    if (self.active) {
        return value.charAt(0).toLowerCase() === self.active;
    }
    return true;
}

<ul>
    <li ng-repeat="country in ctrl.countries | filter:ctrl.filterActive" ng-bind="country"></li>
</ul>