2017-07-31 55 views
3

我已經在角度js中創建了一個自定義過濾器,它按類型對我的元素進行分組,並且在設備的所有屬性中搜索多個搜索條件。Angular.js inifinite digest循環嵌套ng重複和過濾器

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> 
+0

創建一個重現問題的plunker演示 – charlietfl

+0

「無限摘要」聽起來像是大衛福斯特華萊士的小說。 –

回答

0

這是一個典型的無限摘要所造成在不斷變化的數組引用上迭代。由於ng-repeat期間的角度髒檢查,任何返回新的不同數組引用的代碼都將導致無限摘要。

具體來說,在您的過濾器中,您可以創建新的數組實例。你必須重寫你的過濾器,而不是返回一個新的數組。

+0

你是對的,但如果我改變我現有的數組,並刪除不滿足過濾條件的元素,那麼即使我從輸入框中移除字符串,數組也將保持不變。基本上,一旦搜索條件被刪除,我如何顯示所有元素 –