我有一个列表显示在表格中，我需要用名字的第一个字母过滤结果，在列表上方我有一个字母 A B C D 等等。 单击字母列表后将按其名字过滤
例如：列表详细信息为Apple Boy Bridge
点击A后，会显示Apple
【问题讨论】：
标签： javascript angularjs
我不得不过滤国家名称来显示他们的销售代表，而不是水果：
'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>
【讨论】：
setActiveLetter(letter) 的函数，但实际上并没有列出该函数。在您的控制器中使用它：$scope.setActiveLetter = function(letter) { $scope.activeLetter = letter; }; 希望对看到这个的人有所帮助。顺便说一句，很棒的解决方案！
所以问题已经得到解答，但我在寻找答案时遇到了这个问题，并且对 Angular 很陌生，发现它很难正确阅读和理解。然后我发现这个教程解释了过滤器以及它们一般是如何工作的，在他的例子中，他创建了一个我觉得非常有用的“startsWithLetter”过滤器：http://toddmotto.com/everything-about-custom-filters-in-angular-js/
只是想我会发布它，以防有人像我一样无法理解。
【讨论】：
这是旧的，但也许 this plunker 可以提供帮助，使用 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>
【讨论】：
<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>
试试上面的代码，这很容易实现：
【讨论】：