12

tl:博士

如何使用 ajax/json 填充包含“选择”过滤器的 ng 表?

Plunk 显示问题:http://plnkr.co/Zn09LV


细节

我正在尝试掌握 AngualrJS 和 ng-table 扩展,尽管当我使用在 javascript 中定义的静态数据时,我可以获得一些带有工作过滤器的漂亮表格 - 一旦我尝试将真实数据加载到我碰到了一个障碍。

ng-table 的主体已正确填充,只要我只使用文本过滤器,一切似乎都可以正常工作:

        <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 变量。)这意味着我得到一个空列表用于过滤器。

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

对于我的 javascript,我几乎使用了来自 ng-table GitHub 页面的示例 ajax 代码,并将选择过滤器的示例代码添加到它上面。

    $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

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

-凯恩-

4

8 回答 8

8

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

但是我找到了一个我认为非常好的解决方案。首先,您需要覆盖 ngTable 选择过滤器模板(如果您不知道如何执行此操作,它涉及到 using$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}}".

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

于 2015-08-31T05:21:24.480 回答
5

您可以使用自定义过滤器来实现:

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

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

<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 也在这里;)

于 2014-06-06T10:14:44.130 回答
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;
};
于 2014-06-27T10:55:08.930 回答
3

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

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

您可以修改 $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;
};

于 2014-10-15T02:39:52.140 回答
2

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

OP 代码的问题是 filter-data 函数在 $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 问题:如何在 AngularJS 中使用 $scope.$watch 和 $scope.$apply?

于 2015-01-30T20:59:09.390 回答
1

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

但是,is 代码实际上非常简单明了:

在 HTML 中:

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

在控制器中:

$scope.countries = $q.defer();
$http.get("/getCountries").then(function(resp){
  $scope.countries.resolve(resp.data.data);
})
于 2016-04-21T06:05:57.363 回答
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>
于 2017-01-10T08:25:11.673 回答
0

我所做的只是将选择标签与值放在一起,并让 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>

于 2018-02-28T15:47:28.930 回答