使用筛选器在角度搜索

我有一张大桌子（约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

使用筛选器在角度搜索

回答

相关问题