Question

我在角度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）是一组设备。每个任务都定义了一个'type'参数。我需要按类型分隔这些设备。每种设备类型都包含其各自的设备阵列。它可以工作，但最终会进入无限的摘要循环。

输入和输出示例：

$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期间的角度脏检查，任何返回新的不同数组引用的代码都将导致无限的摘要。

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

Angular.js inifinite digest循环，具有嵌套的ng-repeat和filter

1 个答案: