gpt4 book ai didi

javascript - 在 Angular js中用字母过滤列表

转载 作者:数据小太阳 更新时间:2023-10-29 04:31:03 26 4
gpt4 key购买 nike

我在表格中显示了一个列表,我需要用名字的第一个字母过滤结果,在列表上方我有一个字母 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("");

和 View ,如果字母处于事件状态,它还会设置不同的背景颜色:

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

关于javascript - 在 Angular js中用字母过滤列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23242721/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com