Add an extra Capital letter element only at the start of each new letter in ng-repeat - angularjs

Question

I have an array sorted like so:
[aa,ab,ba,bb]
I want to render it like this:
A
aa
ab
B
ba
bb
how can I modify this forech to do this?
<div ng-repeat="item in array" >
{{item}} <br>
</div>

Answer 1

You can do it like this :
$scope.capitalize = function(array){
//group all elements by first letter using lodash
var items = _.groupBy(array,function(element){return element.charAt(0)});
//flatten object arrays to one array
return _.flatten(items,function(elements,letter){return [letter.toUpperCase(),elements] });
}
and on html you have
<div ng-repeat="item in capitalize(array)">
{{item}} <br/>
</div>
Working fiddle :
http://jsfiddle.net/qmw0qp6p/4/
I added also #sameer resolution, but it is not what you want.

Answer 2

I think you don't want to print the words and their first letters like you did in the question, but more like this:
A
- aa
- ab
B
- ba
- bb
To do so, I would aggregate the strings by their first letter using a custom groupBy filter (reusable), and then simply loop on the obtained object.
See this JSFiddle.
The cache system I implemented allows fast access to already computed results and avoids infinite digest loop (occurring because a new object is each time returned by Array.prototype.reduce).

Answer 3

Please try the below code
angular.module('module', []).
filter('capitalize', function() {
return function(input, all) {
return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
}
});
and In HTML
<div ng-repeat="item in array" >
{{item | capitalize}} <br>
</div>