使用 ngHandsontable 实现搜索功能答案

【问题标题】：Implementing Search Feature with ngHandsontable使用 ngHandsontable 实现搜索功能
【发布时间】：2016-02-06 09:09:51
【问题描述】：

我在带有 ngHandsontable 的 Angular 应用程序上使用 handsontable。我可以看到我需要在表设置中将 search 设置为 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
        }
    };

【问题讨论】：

标签： handsontable

【解决方案1】：

问题是访问由 ngHandsOnTable 创建的根 handsOnTable 实例并不像您想象的那么直观，但是为了访问 handOnTable 本身具有的所有功能，您必须做一些事情像这样。

首先，声明我们将用作表实例的变量

$scope.handsOnTable;

您可以通过在设置数组中设置 afterInit 参数来访问 handOnTable 的根目录

$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()" 但这应该可以 - 至少它对我有用。

【讨论】：

如何在 Angular 4 中实现它？