我有一个列表显示在表格中,我需要用名字的第一个字母过滤结果,在列表上方我有一个字母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>
我过滤了像这样的国家数组的元素：
<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>
