使用篩選器在角度搜索

我有一張大桌子（約100列x 100行）。在表格上方，我們有一個文本框以幫助用戶在表格中進行搜索。

我們想要的是當用戶輸入要搜索的文本時，我們只顯示與用戶文本匹配的那些行。搜索應該是響應式的，即當用戶輸入文本時應該縮小行數。

模板中的代碼看起來是這樣的：

<input type="text" ng-model="SearchText" placeholder="Search within table" /> 
    <table> 
    <tr ng-repeat ="row in hugeTableData | customSearchFilter: SearchText"> 
     <td>row.column1</td> 
     <td>row.column2 ..</td> 
     <td>row.column100</td> 
    </tr> 
    </table>

控制器中的代碼如下：

mpapp. filter('customSearchFilter', function() { 
    return function(rows, text) { 
    var result = []; 
    if (text) { 
     var upperCaseText = text.toUpperCase(); 
     angular.forEach(rows, function(row, i) { 
     if (row.alwaysIncludeFlag) { 
      result.push(row); 
     } 
     else { 
      var matched = false; 
      for each(col in row) { 
      var v = row[col]; 
      if (!angular.isUndefined(v) && v.toUpperCase().indexOf(upperCaseText) >= 0) { 
       matched = true; 
      } 
      } 
      if (matched) { 
      result.push(row); 
      } 
     } 
     }); 
    } 
    else { 
     angular.forEach(rows, function(row) { 
     result.push(row); 
     }); 
    } 
    return result; 
    }; 
});

的問題是，搜索是極其緩慢。因此，如果我正在搜索一個單詞，那麼搜索文本框甚至不會一次註冊整個單詞，因爲在用戶輸入單詞的每個字符後都會經過此循環..花費幾秒鐘..返回結果..然後它在文本框中註冊下一個字符..等等。

點是..這種搜索方法導致絕對最差的用戶體驗。

如果有人對如何解決這個更好，善意的建議有任何線索。

來源

2013-12-11 runtimeZero

使用'$ timeout'服務來限制過濾。 – Stewie

也可以隨着字符串長度增加而緩存行。說第一個字母縮小到20，下一個字母添加搜索只有20個元素不是100 – charlietfl

[AngularJS'ng-filter'在〜1000個元素的數組上很慢]（http://stackoverflow.com/問題/ 17969207/angularjs-ng-filter-is-very-slow-on-array-of-1000-elements） – tungd

您可能可以進行一些速度優化。

mpapp.filter('customSearchFilter', function() { 
    return function(rows, text) { 
     if (text) { 
      var result = [];   
      var upperCaseText = text.toUpperCase(); 
      angular.forEach(rows, function(row, i) { 
       if (row.alwaysIncludeFlag) { 
        result.push(row); 
       } 
       else { 
        for(var col in row){ 
         var v = row[col]; 
         if (!angular.isUndefined(v) && v.toUpperCase().indexOf(upperCaseText) >= 0) { 
          result.push(row); 
          break; 
         } 
        } 
       } 
      }); 
      return result; 
     } 
     else { 
      return rows; 
     } 
    }; 
});

來源

2013-12-11 17:56:26

使用篩選器在角度搜索

回答

相關問題