如何从异步调用中填充ng表上的选择筛选器

我遇到了一个类似但稍微复杂一点的问题。我希望能够动态更新过滤器列表，这似乎完全可行，因为它们无论如何都应该在$scope变量中。基本上，我预计，如果我有$scope.filterOptions = [];，那么我可以设置filter-data="filterOptions"，并且对该列表的任何更新都将自动反映出来。我错了。

但我找到了一个我认为非常好的解决方案。首先，您需要覆盖ngTable选择过滤器模板(如果您不知道如何做到这一点，它涉及到使用$templateCache，并且您需要覆盖的关键字是'ng-table/filters/select.html'(。

在普通模板中，您会发现类似于ng-options="data.id as data.title for data in $column.data"的内容，问题是$column.data是一个固定值，当我们更新$scope.filterOptions时不会更改。

我的解决方案是只传递$scope键作为筛选数据，而不是传递整个选项列表。因此，我将传递filter-data="'filterOptions'"，而不是filter-data="filterOptions"，然后在模板中进行一个小的更改，如：ng-options="data.id as data.title for data in {{$column.data}}"。

显然，这是对select过滤器工作方式的重大更改。在我的案例中，这是一个非常小的应用程序，只有一张表，但你可能会担心这样的更改会破坏你的其他选择。如果是这种情况，您可能希望将此解决方案构建到自定义筛选器中，而不是仅覆盖"select"。

您可以使用自定义过滤器来实现这一点：

ngtable上标准选择过滤器的代码显示：

<select ng-options="data.id as data.title for data in column.data"
    ng-model="params.filter()[name]"
    ng-show="filter == 'select'"
    class="filter filter-select form-control" name="{{column.filterName}}">
</select>

当您调用这个数据时，您传递：filter-data="names($column)"和ngtable负责为您获取数据。我不知道为什么这对外部资源不起作用。正如你所指出的，我打赌这与$栏和承诺有关。

为了避免这种情况，我在代码中做了一个快速的变通方法。编写我自己的筛选模板，如：

<select id="filterTest" class="form-control" 
    ng-model="tableParams.filter()['test']" 
    ng-options="e.id as e.title for e in externaldata">
</select>

您在控制器中获取此外部数据：

$scope.externaldata = Api.query(); // Your custom api call

它工作得很好，但我的数据上确实有一个id，所以不需要name函数。

我知道这个解决方案不是最优的。让我们看看是否有人在这里写的比这个"变通方法"更多，并对我们有所启发。甚至esvit有时也在这里；(

这对我来说很有效：

HTML:

<td data-title="'Doc type'" filter="{ 'doc_types': 'select' }" filter-data="docTypes()" sortable="'doc_types'">
    {{task.doc_type}}
</td>

AngularJS:

$scope.docTypes = function ($scope) 
{
    var def = $q.defer();
    //var docType = [
    //    {'id':'4', 'title':'Whatever 1'},
    //    {'id':'9', 'title':'Whatever 2'},
    //    {'id':'11', 'title':'Whatever 3'}
    //];
    // Or get data from API.
    // Format should be same as above.
    var docType = $http.get('http://whatever.dev', {
        params: { param1: data1 }
    });
    //Or with Restangular 
    var docType = Restangular.all('/api/doctype').getList();
    def.resolve(docType);
    return def;
};

正如@Andión所提到的，您可以使用自定义过滤器来实现。

使用Promises(Angular中的$q服务(很容易实现异步数据填充，有趣的Andy关于Promises的文章

您可以修改$scope.names方法并添加返回异步数据的$http服务，并将延迟对象解析为：

$scope.names = function(column) {
  var def = $q.defer();
  /* http service is based on $q service */
  $http({
    url: siteurl + "app/application/fetchSomeList",
    method: "POST",
  }).success(function(data) {
    var arr = [],
      names = [];
    angular.forEach(data, function(item) {
      if (inArray(item.name, arr) === -1) {
        arr.push(item.name);
        names.push({
          'id': item.name,
          'title': item.name
        });
      }
    });
    
    /* whenever the data is available it resolves the object*/
    def.resolve(names);
  });
  return def;
};

我遇到了类似的问题，但不想进行额外的AJAX调用来获取过滤器值。

OP代码的问题是在填充$scope.data之前执行筛选数据函数。为了解决这个问题，我使用Angular$watch来监听$scope.data上的更改。一旦$scope.data有效，过滤器数据就会正确填充。

        $scope.names2 = function () {
        var def = $q.defer(),
             arr = [],
                names = [];
        $scope.data = "";
        $scope.$watch('data', function () {

            angular.forEach($scope.data, function (item) {
                if (inArray(item.name, arr) === -1) {
                    arr.push(item.name);
                    names.push({
                        'id': item.name,
                        'title': item.name
                    });
                }
            });
        });
        def.resolve(names);
        return def;
    };

原来的plunk随着变化而分叉：http://plnkr.co/edit/SJXvpPQR2ZiYaSYavbQA

另请参阅$watch上的SO问题：如何使用$scope$手表和$scope$在AngularJS中申请？

正如Diablo 所提到的，我用$q.delay((解决了这个问题

然而，is代码实际上非常简单明了：

HTML格式：

<td ... filter-data="countries">

在控制器中：

$scope.countries = $q.defer();
$http.get("/getCountries").then(function(resp){
  $scope.countries.resolve(resp.data.data);
})

"首先，您需要覆盖ngTable选择过滤器模板(如果您不知道如何做到这一点，它涉及到使用$templateCache，并且您需要覆盖的密钥是'ngTable/filters/select.html'(。">

我在ng表的脚本下面添加了被高估的脚本，一切都很好。。。

<script id="ng-table/filters/select.html" type="text/ng-template">
 <select ng-options="data.id as data.title for data in {{$column.data}}" ng-table-select-filter-ds="$column" ng-disabled="$filterRow.disabled" ng-model="params.filter()[name]" class="filter filter-select form-control" name="{{name}}"> <option style="display:none" value=""></option> </select>
</script>

我所做的只是放置带有值的select标记，并让ng模型返回过滤器的值。

这很有帮助，因为我需要翻译纯文本。

<td data-title="'Status'| translate" ng-bind = "("cc_assignment_active"== '0') ? ('Inactive' | translate) : ('Active'| translate)" 
                    filter="{ cc_assignment_active: 'select3'}" >
</td>
<script id="ng-table/filters/select3.html" type="text/ng-template">
<select  class="filter filter-select form-control"  ng-model="params.filter()[name]" name="{{name}}">
    <option active value="" translate>---All---</option>
    <option value="1" translate>Active</option>
    <option value="0" translate>Inactive</option>
</select>