ng-repeatとフィルターを入れたAngular.js inifiniteダイジェストループ

Question

私の要素をタイプごとにグループ化するカスタムjaを作成しました。は、デバイスのすべての属性で複数の検索タームを検索します。

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の間に角ダーティチェックが行われるため、新しい個別の配列参照を返すコードでは、無限のダイジェストが発生します。

特に、フィルタでは新しい配列インスタンスを作成します。新しい配列を返す代わりに、にフィルターを書き換えて、既存の配列を変更する必要があります。