Angularjs inifinite digest loop with nested ng repeat and filter
I created a custom filter in angular js that groups my elements by type and searches for multiple search terms across all device attributes .
angular.module('abc').filter('searchFor', function(){
return function(array, searchString){
var arr =[]
if(!searchString.length){
return array;
}
var result = [];
for(var i=0;i<array.length;i++){ //put all
devices of all device Groups into arr
var temp = array[i].devices
for(var j=0;j<temp.length;j++){
arr.push(temp[j])
}
}
// search in tags of arr individual searchString
for(var i=0; i<searchString.length;i++){
searchString[i] = searchString[i].toLowerCase()
var res = []
for(var k in arr){
//there are some tags in device data object so I am searching in the same
var tags = arr[k].tags
tags.push(arr[k].ID)
tags.push(arr[k].Name)
tags.push(arr[k].Type)
for(var j in tags){
if(tags[j].toLowerCase().indexOf(searchString[i]) !== -1){ // if tags matches with searchString push it in res
res.push(arr[k]);
break; // push one device only once
}
}
result[i] = res //here i refers to search-term number ie. search-term i result is saved in result[i]
}
}
if (result.length > 1) {
// there are more than 1 chips to search
result.sort(function(a,b) { // sort result array acc to its element length
return a.length - b.length
})
// find intersection between every 2 consecutive arrays in result
// and store that intersection at i+1 index of result
for(i=0;i<result.length-1;i++){
var a = result[i]
var b = result[i+1]
var common = []
for (var j = 0; j < a.length; j++) {
for (var k = 0; k < b.length; k++) {
if (a[j].ID == b[k].ID) {
common.push(b[k])
break;
}
}
}
result[i+1] = common
}
// finally store the intersection of all arrays of result in resultFinal
resultFinal = common
}else {
//result of only 1 search-term
resultFinal = result[0]
}
/* Finally resultFinal contains the devices satisfying the search
criteria
Before returning back group all the devices according to their
device types in deviceGroups(data Structure is as mentioned in demo
output) */
return deviceGroups
}
})
What it does: Input (device_data) is an array of devices. Each task has a type parameter. I need to sort these devices by type. Each device type contains a corresponding array of devices. It works, but ends up in an endless digest loop.
Examples of input and output:
$scope.device_data = [
{name: 'D_1', type: 'wmeter'},
{name: 'D_2', type: 'fmeter'},
{name: 'D_3', type: 'smeter'},
{name: 'D_4', type: 'fmeter'}
]
The output should be grouped as follows:
[
'watermeter': [
{name: 'D_1'}
],
'flowmeter': [
{name: 'D_2'},
{name: 'D_8'}
],
'solar': [
{name: 'D_3'}
]
]
HTML:
<div ng-repeat="group in deviceGroups | searchFor: searchString">
<h2>{{group.type.toUpperCase()}}</h2>
<div ng-repeat="device in group.devices">
<p>{{device.name}}</p>
</div>
</div>
source to share
This is a classic endless digest caused by ng-repeat
repeating on an ever-changing array reference. Since angular has dirty checks in time ng-repeat
, any code that returns a new reference to a separate array will trigger an infinite digest.
Specifically, new array instances are created in your filter. You should rewrite your filter to modify the existing array instead of returning a new array.
source to share