There is such a "script" that filters the list by clicking on the letter of the alphabet.

$('.AlphabetNav a').click(function(evt) { evt.preventDefault(); var $navItem = $(this), $contacts = $('.Contact'); $contacts.show(); if ($navItem.hasClass('active')) { $navItem.removeClass('active'); } else { $('.AlphabetNav a').removeClass('active'); $navItem.addClass('active'); $.each($contacts, function(key, contact) { var $contact = $(contact), $contactName = $contact.find('.Contact-name'), $nameArr = $contactName.text().split(' '); console.log($nameArr[0].split('')[0].toLowerCase()); if ($nameArr[0].split('')[0].toLowerCase() !== $navItem.text().toLowerCase()) { $contact.hide(); } }); } });

I want to do it in pure JavaScript, but with some changes. JSON comes from the server in different languages, so the list of alphabetic letters can also be different, respectively. What is the script creation algorithm?

  1. sort array ( items ) sort th alphabetically.

  2. We take items.values().chartAt[0] , loop through all the elements of the array and, if chartAt[0] indexOf in the new array, then skip.

  3. I do not know further.

  • And what does jQuery not suit you with? - Regent
  • It would be desirable then to transfer this to angular. And there jQuery to anything. Anyway interesting - Micro
  • If you want to - do it, we do not mind;) - Visman
  • Thanks, of course, but ... - Micro

1 answer 1

Hi Micro!

Here you have sketched Plunkre such a list. In AngularJS there is such a thing as a filter that fits very well in your case. I did not write the download of information from json, I think it is not very difficult, so the letters and names in this example are stored in simple arrays.

The most important of all examples is the filter:

 app.filter('NameFilter', function() { return function(input, criteria) { var output = []; for (name of input) if (criteria === undefined || name.toLowerCase().charAt(0) === criteria) output.push(name); return output; }

});

In the controller, we will simply store the letter for the filter (criteria), which we will then pass to the filter itself. In this example, there is nothing difficult:

  1. With the help of the ng-repeat directive, we go through all the names and put them into section
  2. Add to ng-repeat our filter, which accepts an array of names as input, and returns only the necessary names

And that's all. I hope my answer will help:) Good luck!

plunkr