Question

我试图通过两个外部级联下拉列表在ngTable上获得过滤器支持。正如文档显示我已更新filterOptions但似乎没有运气。请帮帮我

$scope.tblInventory = new ngTableParams({
    page: 1,
    count: 10,
    filter: $scope.searchObjs,
}, {
    total: 0,
    getData: function ($defer, params) {
        inventoryService.getAllVehicles().then(function (data) {
            params.total(data.length);
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        });
    }
});

我的Html标记

<select class="form-control" id="make" name="make" data-ng-model="searchObj.make"
        data-ng-disabled="!searchObj.makes"
        ng-options="make for make in makes">
    <option style="display:none" value="">Select a make</option>
</select>
<label>
    Model
</label>
<select class="form-control" id="model" name="model" data-ng-model="searchObj.model"
        data-ng-disabled="!searchObj.models"
        ng-options="model for model in models">
    <option style="display:none" value="">Select a model</option>
</select>


<table ng-table="tblInventory" class="table">
    <tr ng-repeat="item in $data">
        <td data-title="'Stock'">
            {{item.stockNumber}}
        </td>
        <td data-title="'Make'">
            {{item.make}}
        </td>
        <td data-title="'Model'">
            {{item.model}}
        </td>
    </tr>
</table>

Answer 1

这里实际上有一些问题。首先，您在视图中引用searchObj，但附加到范围的对象实际上称为searchObjs。其次，您实际上并未在getData函数中使用过滤器。因此，在从inventoryService返回时，您需要应用过滤器，如下所示：

      data = params.filter() ?
           $filter('filter')(data, params.filter()) :
           data;
      params.total(data.length);
      $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));

这是plnkr做你需要的。

您可能想要考虑的另一件事（尽管这不会导致您的代码无效）是您是否希望每次过滤器更改时都调用inventoryService。每次更改过滤器都会调用getData，因此您可能希望从getData之外的服务中检索所有广告资源，并仅在getData内执行过滤/分页等。

更新

是的，您可以在主控制器功能中调用服务，然后在承诺返回的ngTableParams函数内添加数据和then。我已经创建了一个新的plnkr来证明这一点。

使用ng-table的级联下拉过滤器

1 个答案:

更新