过滤与角JS字母列表 [英] Filter the list with letter in angular js
问题描述
我在表中显示一个列表,其中我需要过滤用的名字第一个字母的结果,上面的列表中我有一个字母A B C D等。
点击后面的字母列表将其名字是过滤器
I have a list displayed in table where I need to filter the result with first letter of name,above the list I have a letter A B C D and so on. After click the letter list will be filter by its first name
有关前:名单细节苹果男孩桥
后点击 A
,苹果
将显示
For ex: list details are Apple Boy Bridge
after click A
, Apple
will be displayed
推荐答案
水果代替,我不得不筛选国名,以显示自己的销售再presentatives:
Instead of fruit, I had to filter names of countries to display their sales representatives:
'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;
}
});
一个快速生成与英文字母的数组:
A quick way to generate an array with letters of the alphabet:
$scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
和看法,这也设置一个不同的背景颜色,如果这封信是活动:
and the view, which also sets a different background colour if the letter is active:
<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>
我过滤国家的数组像这样的内容:
I filtered elements of the array of countries like this:
<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>
您可以检查是否存在使用。长度
在过滤列表元素:
You can check if there are elements in the filtered list using .length
:
<div class="alert alert-warning" ng-hide="filteredCountriesArray.length">No available countries starting with <em>{{activeLetter}}</em></div>
这篇关于过滤与角JS字母列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!