Question

我有一个列表显示在表格中，我需要用名字的第一个字母过滤结果，在列表上方我有一个字母A B C D，依此类推。点击后，字母列表将按其名字

进行过滤

例如：列表详情为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>

Answer 2

所以这个问题已得到解答，但我遇到了这个问题，寻找一个答案，并且对于角度很新，发现它很难理解和理解。然后我发现本教程解释了过滤器以及它们如何工作，在他的例子中，他创建了一个“startsWithLetter”和＃39; startsWithLetter＆＃39;我觉得非常有用的过滤器：http://toddmotto.com/everything-about-custom-filters-in-angular-js/

我以为我会发布它以防万一有人像我一样有理解。

Answer 3

这是旧的，但也许this plunker可以帮助，使用角度滤镜过滤器。

定义如下表达式：

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

Answer 4

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

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

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

4 个答案: