如何从异步调用中填充ng-table上的选择过滤器

问题描述 投票：11回答：8

tl：博士

如何使用ajax / json填充包含“select”过滤器的ng表？

Plunk showing the problem: http://plnkr.co/Zn09LV

详情

我试图掌握AngualrJS和ng-table扩展，虽然我可以使用工作过滤器获得一些很好的表，当我使用javascript中定义的静态数据时 - 一旦我尝试将实际数据加载到桌子我遇到了障碍。

ng-table的主体正确填充，只要我只使用文本过滤器everthing似乎正在工作：

        <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
            {{user.Name}}
        </td>

工作得很好。

但是，如果我更新它以使用选择过滤器：

        <td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'"  filter-data="Names($column)">
            {{user.Name}}
        </td>

我遇到了同步问题，因为在从服务器返回数据之前总是会评估Names变量。 （可能在发送对服务器的请求之前评估Names varibale。）这意味着我得到了一个过滤器的空列表。

一旦数据从服务器返回 - 我似乎找不到更新选择过滤器的方法。重新运行创建过滤器列表的代码最初似乎没有效果 - 我不确定如何触发ng-table重新检查其过滤器，以便不读取更新的变量。在异步调用完成之前，我也无法找到推迟变量评估的方法。

对于我的javascript，我几乎使用了ng-table GitHub页面中的示例ajax代码，并在其上添加了select过滤器的示例代码。

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: 0,           // length of data
        getData: function($defer, params) {
            // ajax request to api
            Api.get(params.url(), function(data) {
                $timeout(function() {
                    // update table params
                    var orderedData = params.sorting ?
                    $filter('orderBy')(data.result, params.orderBy()) :
                    data.result;
                    orderedData = params.filter ?
                    $filter('filter')(orderedData, params.filter()) :
                    orderedData;

                    $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve($scope.users);
                }, 500);
            });
        }
    });

    var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val)
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === val) return i;
        }
        return -1
    };
$scope.names = function(column) {
    var def = $q.defer(),
        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
            });
        }
    });
    def.resolve(names);
    return def;
};

我尝试了几次尝试添加额外的$ q.defer（）并包装初始数据后跟$ scope.names函数 - 但我对promise和defer的理解不够强大，无法使任何工作。

关于GitHub的一些注释表明这是ng-table中的一个错误，但我不确定是不是这种情况，或者我只是在做一些愚蠢的事情。

https://github.com/esvit/ng-table/issues/186

关于如何进行的指针非常感谢

-Kaine-

javascript angularjs ngtable
8个回答
8
投票

我有一个类似但稍微复杂的问题。我希望能够动态更新过滤器列表，这似乎完全可行，因为它们应该只是在$ 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传递，而不是传递整个选项列表。因此，我将通过filter-data="filterOptions"而不是filter-data="'filterOptions'"，然后在模板中进行一些小改动，如：ng-options="data.id as data.title for data in {{$column.data}}"。

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

5
投票

你可以通过custom filter实现这一目标：

ngtable上标准选择过滤器的code说：

<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负责为您获取数据。我不知道为什么这不适用于外部资源。我敢打赌它与$ column和promise有关，正如你所指出的那样。

我在代码中做了一个快速的解决方法来避免这种情况。编写我自己的选择过滤器模板，如：

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

您在控制器中获取此externaldata：

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

它工作得很好，但我的数据确实有id，所以不需要name功能。

我知道这个解决方案不是最优的。让我们看看有人在这里写的不仅仅是这个“解决方法”并且启发了我们。即使esvit有时在这里;）

4
投票

这对我有用：

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;
};
3
投票

正如@Andión所提到的你可以用custom filter实现。

使用Promises（the $q service in Angular），有趣的Andy Article about 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;
};
2
投票

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

OP代码的问题是filter-data函数在填充$ scope.data之前执行。为了解决这个问题，我使用了Angular $ watch来监听$ scope.data上的更改。一旦$ scope.data有效，就会正确填充filter-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;
    };

最初的插件分叉了变化：http://plnkr.co/edit/SJXvpPQR2ZiYaSYavbQA

另请参阅$ watch：How do I use $scope.$watch and $scope.$apply in AngularJS?上的SO问题

1
投票

我用暗黑破坏神提到的$ q.defer（）解决了这个问题

但是，代码实际上非常简单明了：

在HTML中：

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

在控制器中：

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

“首先，您需要覆盖ngTable选择过滤器模板（如果您不知道如何执行此操作，则涉及使用$ templateCache，您需要覆盖的键是'ng-table / filters / select.html'） “。

我在ng-table脚本下面添加了覆盖的脚本，一切运行良好......

<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>
0
投票

我所做的只是将select标记放入值并让ng-model返回过滤器的值。

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

<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.