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>

      

+3


source to share


1 answer


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.

0


source







All Articles