angularjs - 如何在 ngTable 中组合客户 header 和过滤器

Question

我想创建一个 ngTable，它是 ngTable site 中#4(过滤器)和#18(自定义 header )示例的组合。 .我无法让它工作。谁能给我举个例子？谢谢!

Answer 1

由于仅通过融合这两个示例似乎确实不起作用，因此我已根据 ng-table 站点的示例 #18 为您创建了一个新表，请参阅 http://bazalt-cms.com/ng-table/example/18 .

首先，我添加了一个带有 ng-model 的新输入字段，以便输入到该字段中的用户输入可以绑定(bind)到 angularjs 脚本。像这样:

<tr>
    <th colspan="3">
        <input class="form-control" type="text" ng-model="filters.myfilter" placeholder="Filter"  />
    </th>
</tr>

为了让变量被表用作过滤器，必须按以下方式“声明”并附加到 ng-table ( https://github.com/esvit/ng-table/wiki/Configuring-your-table-with-ngTableParams ):

$scope.filters = {
    myfilter: ''
};

和

$scope.tableParams = new ngTableParams({
            page: 1,            
            count: 10,           
            filter: $scope.filters, //now the filter is attached to the ng-table
        }

最后，我在示例 #6 ( http://bazalt-cms.com/ng-table/example/6 ) 中使用了过滤脚本的略微修改版本来过滤上述变量(由 ng-model 绑定(bind))。

这是过滤和排序数据的 getData 函数:

getData: function($defer, params) {

    var filtered_data = params.filter() ? $filter('filter')(data, params.filter().myfilter) : data;
    filtered_data = params.sorting() ? $filter('orderBy')(filtered_data, params.orderBy()) : filtered_data;

    $defer.resolve(filtered_data.slice((params.page() - 1) * params.count(), params.page() *   params.count()));
}

这对我有用。

您可以在这个 Plunk 上找到表格:http://plnkr.co/edit/ntnNqxmKsQoFmSbo0P57?p=preview