[Solved] Angular show list in alphabetical order and also show divider

by


You have to filter each group by the letters you want. Here’s a Plunker Using this list:

$scope.myList = [{
    id: 11,
    name: 'Okra'
}, {
    id: 12,
    name: 'Musa'
}, {
    id: 4,
    name: 'Sky'
}, {
    id: 13,
    name: 'India'
}, {
    id: 14,
    name: 'Rose'
}, {
    id: 15,
    name: 'Titanic'
}, {
    id: 16,
    name: 'Onion'
}, {
    id: 6,
    name: 'Germany'
}, {
    id: 17,
    name: 'Beer'
}, {
    id: 18,
    name: 'Run'
}, {
    id: 2,
    name: 'Garden'
}, {
    id: 19,
    name: 'Mountain'
}]

One function to get the alphabets between the two:

function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
    a.push(String.fromCharCode(i));
}
return a;

};

Then your filter:

app.filter("cfilter", function () {
return function (input, x, y) {
    var groups = [];
    var letters = genCharArray(x, y);
    for (var i = 0; i < input.length; i++) {
        for (var x = 0; x < letters.length; x++) {
            if (input[i].name.substring(0, 1) == letters[x])
                groups.push(input[i]);
        }

    } return groups;
}

});

And your HTML:

    <div ng-repeat="w in myList | cfilter: 'A':'H' | orderBy: 'name'">
  <div>{{w.name}}</div>
</div>

2

solved Angular show list in alphabetical order and also show divider