在角度过滤器中添加索引

Question

For various reasons I am using an Angular filter to add to the itemlist that will be used by ng-repeat (basically I need to group certain items under a subheading in a table).

app.filter('tableFilter',

function(){    
    return function(items){

        if (!items){
            return; 
        }

        var transformed = [];            
        for (var i = 0; i < items.length; i++){

            if (items[i].classid){

                if (i === 0 || items[i].classid !== items[i-1].classid){
                    transformed.push({classheader : true});
                }
                else{
                    items[i].classheader = false;
                }
            }
            transformed.push(items[i]);
        }                                
        return transformed;            
    }
}
);

The good news is that it works. The bad news is that it generates errors, the first one being:

[$rootScope:infdig]
http://errors.angularjs.org/1.2.23/ $rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…%7C%20''%3B%20newVal%3A%20%5C%22%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D

Which is to do with infinite loops in the digest cycle. I suspect that by adding to the item list I am corrupting the array / $index used by ng-repeat .

I can transform the itemlist in the controller / service but that does not seem correct since this is basically only being done for presentation.

Answer 1

Do not change properties from items on filter. This will invoke again the forEach loop.

remove this line: items[i].classheader = false;

if you need to update classheader flag on transformed array, you can change your code to use angular copy:

app.filter('tableFilter',

function() {    
    return function(items){

        if (!items){
            return; 
        }

        var transformed = [];            
        for (var i = 0; i < items.length; i++) {

            var item = angular.copy(items[i]);

            if (items[i].classid) {

                if (i === 0 || items[i].classid !== items[i-1].classid) {
                    transformed.push({classheader : true});
                } else {
                    item.classheader = false;
                }
            }
            transformed.push(item);
        }               
        return transformed;            
    };
}
);