带有嵌套 ng-repeat 和过滤器的 Angularjs 无限摘要循环

Question

我在 Angular js 中创建了一个自定义过滤器，它按类型对我的元素进行分组并在设备的所有属性中搜索多个搜索词。

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's 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's 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
}
})

它的作用： 输入 (device_data) 是一个设备数组。每个任务都定义了一个“类型”参数。我需要按类型分隔这些设备。每个设备类型都保存其各自的设备数组。 它可以工作，但最终会进入无限摘要循环。

输入输出示例：

$scope.device_data = [
    {name: 'D_1', type: 'wmeter'},
    {name: 'D_2', type: 'fmeter'},
    {name: 'D_3', type: 'smeter'},
    {name: 'D_4', type: 'fmeter'}
]

输出必须像这样分组：

[
    '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>

Answer 1

这是一个经典的无限摘要，由 ng-repeat 迭代不断变化的数组引用引起。因为在ng-repeat 期间进行角度脏检查，所以任何返回新的不同数组引用的代码都会导致无限摘要。

具体来说，在您的过滤器中创建新的数组实例。您必须将过滤器重写为 alter 现有数组，而不是返回新数组。