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
For ex: list details are Apple Boy Bridge
after click A, Apple will be displayed
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>
setActiveLetter(letter) but don't actually list the function. Use this in your controller: $scope.setActiveLetter = function(letter) { $scope.activeLetter = letter; }; Hope that helps somebody who sees this. Fantastic solution btw!So the question has been answered but I came across this looking for an answer and being quite new to angular found it kind of hard to read and understand properly. I then found this tutorial explaining filters and how they work in general and in his examples he creates a 'startsWithLetter' filter which I found quite useful: http://toddmotto.com/everything-about-custom-filters-in-angular-js/
Just thought I would post it in case anyone had trouble understanding like I did.
this is old but maybe this plunker can help, using angular's filter filter.
Define an expression like so:
// Filter Expression
this.filterActive = function(value){
if (self.active) {
return value.charAt(0).toLowerCase() === self.active;
}
return true;
}
Then in 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>
try above code this is simple to implement:
