使用角度js中的字母过滤列表

Question

我在表格中显示了一个列表,我需要用名字的第一个字母过滤结果,在列表上方我有一个字母ABCD,依此类推.点击后,字母列表将按其名字进行过滤

对于例如:在列表的详细信息Apple Boy Bridge 点击后A,Apple会显示

Answer 1

我不得不过滤水果,过滤国家名称以显示他们的销售代表:

'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>

我过滤了像这样的国家数组的元素:

<ul class="list-group countries-salesreps" >
    <li class="list-group-item" ng-repeat="country in filteredCountriesArray = (countriesArray | firstLetter:activeLetter)" ng-click="showSalesRep(country)" ng-class="{'btn-primary': country==currentCountry}">{{country}}</li>
 </ul>

您可以使用以下方法检查筛选列表中是否有元素.length:

<div class="alert alert-warning" ng-hide="filteredCountriesArray.length">No available countries starting with <em>{{activeLetter}}</em></div>