使用ngHandsontable实现搜索功能

Question

我在ngHandsontable的angular应用上使用handsontable。我可以看到，我需要在表设置中将搜索设置为true，这应该使查询方法可用。
有人可以解释我如何能够通过我的角度控制器访问该方法吗？

<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" /> 
    <hot-table settings="tableSettings.settings" 
      datarows="mappingData" 
      col-headers="true" 
      height="700"> 
     <hot-column data="Column1" title="'Column One'"></hot-column> 

    </hot-table> 

角

function GlobalMappingController($scope) { 
    $scope.tableSettings = { 
     settings: { 
      contextMenu: true, 
      colHeaders: true, 
      dropdownMenu: true, 
      afterChange: afterChange, 
      beforeChange: beforeChange, 
      search: true, 
      query: $scope.searchQuery 
     } 
    }; 

Answer 1

问题是访问由纳克 HandsOnTable并不像直观的，你可能会认为创建的根handsOnTable实例，但为了访问所有handsOnTable具有的功能本身你必须做这样的事情。

首先声明，我们将作为表的实例

$scope.handsOnTable;

您可以通过设置阵列中设置afterInit参数为访问的handsOnTable根使用变量

$scope.tableSettings = { 
     settings: { 
      contextMenu: true, 
      colHeaders: true, 
      dropdownMenu: true, 
      afterChange: afterChange, 
      beforeChange: beforeChange, 
      search: true, 
      query: $scope.searchQuery, 

      //insert this 
      afterInit: function() { 
       $scope.handsOnTable = this; 
      } 
     } 
    }; 

然后，您可以在输入上设置一个ng-change，如下所示：

function search() { 
    $scope.handsOnTable.search.query($scope.searchQuery); 
    $scope.handsOnTable.render(); 
} 

您还需要按照与afterInit相同的方式，使用相同的语句设置afterchange。如果您有自己的定制版本的功能，那么只需在其他所有功能运行后将其放入。

请记住，您必须将输入框限制为searchQuery并添加onChange="search()"，但该功能应起作用 - 至少它适用于我。