I devised a personalized filter that segregates an array of key-value pairs into an object based on grouping values by the first letter of a specific property. For instance
Input:
[{foo: 'bar'}, {faz: 'baz'}, {boo: 'foo'}]Output:
{f: [{foo: bar}, {faz: baz}], b: [{boo, foo}]}
However, this custom filter appears to be resulting in an infinite digestion error within Angular.
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope){
$scope.arr = [{name: 'foo', def: 'bar'}, {name: 'faz', def: 'baz'}, {name: 'boo', def: 'foo'}]
}]);
app.filter('firstLetterChunks', function() {
return function(input){
var chunks={};
for(var i = 0; i < input.length; i++){
var firstLetter = input[i].name[0].toUpperCase();
if(!(chunks.hasOwnProperty(firstLetter))) {
chunks[firstLetter]=[];
}
chunks[firstLetter].push(input[i]);
}
return chunks;
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
This caused a infdig error. Check your console.
<div ng-repeat="(firstletter, values) in arr | firstLetterChunks">
{{firstletter}}
<hr>
<div ng-repeat="value in values">
{{value}}
</div>
</div>
</div>
</div>I am struggling to pinpoint the reason behind this issue. From my research, it seems to typically arise from modifying the model in the filter, consequently triggering a re-rendering of the ng-repeat directive, but I do not believe I am engaging in such actions.