1

我正在尝试通过两个外部级联下拉列表在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>
4

1 回答 1

2

这里实际上有几个问题。首先,您searchObj在视图中引用,但附加到您的范围的对象实际上称为searchObjs. 其次,您实际上并没有在getData函数中使用过滤器。因此,在您的 return frominventoryService中,您需要应用过滤器,如下所示:

      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

更新:

是的,你可以把对服务的调用放在主控制器函数中,然后在 promise return 上添加数据和函数ngTableParams内部。then我创建了一个新的plnkr 来证明这一点。

于 2014-09-05T17:33:00.210 回答