Split list of countries in alphabetical order using Angularjs - angularjs

Question

I want to split a list of countries in alphabetical order using Angularjs.
Somewhat like A : America , Australia B: Brazil, Bhutan ...
The list is coming from a table named countries. I tried to apply angularjs filter on the first alphabet of the country name but failed. Do I have to create a custom filter for it?

Answer 1

Ok I am going to answer my own question finally got it working.
I was pulling a list of countries from a postgres db in the following format:
{"alpha2":"ao","alpha3":"ago","numeric":"024","country":"Angola"}
I wanted to split the list of countries in alphabetical order like this :
[Example] http://infoplease.com/countries.html#ALPHA-A
I finally got it working by writing a custom filter:
angular.module('countryFilter', []).filter('cfilter', function() {
return function(input,x) {
var groups = [];
for(var i = 0; i < input.length; i++) {
if (input[i].country.substring(0,1) == x)
groups.push(input[i]);
} return groups; }
});
and using it as :
ng-repeat="data in countries | cfilter:'A'
{{data.country}}
Do let me know if there is any better way for doing this...

Answer 2

This is another possible solution without the use of a filter
http://www.bennadel.com/blog/2456-Grouping-Nested-ngRepeat-Lists-In-AngularJS.htm
He creates a new array with a label and the data. The advantage is that in the template you don't have to name all the possible letters.
For my own I take the first letter of the client from the object and store that in the label. In that way I only get the letters I used.
In customer I have stored an array with objects.
for(var i = 0; i < customers.length; i++){
var customer = customers[i];
if(customer[ 'title' ].substring(0,1) !== groupValue){
var group = {
label : customer[ 'title' ].substring(0,1),
customers : []
};
groupValue = customer.title.substring(0,1);
groups.push( group );
};
group.customers.push( customer );
};

Answer 3

Sort Item List is a jQuery plugin that creates iOS-style sticky headers similar to those seen in the Music and Contacts apps on Apple devices
check link :
http://www.codingprogrammer.com/tutorialdemo/jquery-tutorial/sort-items-alphabetically-jquery-2/