Ng-table: tableParams.reload() 不会重新加载过滤器数据

创建于 2014-01-27  ·  30评论  ·  资料来源: esvit/ng-table

我正在使用 tableParams.reload()(和 params.total(filteredData.length))用新的外部数据重新加载表,但“select”和“select-multiple”过滤器中的选择不会改变。 tableParams.reload() 应该再次调用“filter-data”函数,不是吗? 有没有另一种方法可以做到这一点?

最有用的评论

我的数据已成功加载到 DOM 上,但是当我从服务器获取数据并希望通过 tableParams.reload() 刷新 ng-table 时,它​​没有反映结果,但是当我单击排序或分页时,它反映了结果。
这是什么问题?

所有30条评论

你好呀。 首先 - 感谢您的项目。
我也有同样的问题。 我需要使用从服务器获取的数据更新过滤器,但不知道如何触发过滤器数据功能。

我发现如果您在 getData 函数中声明您的数据,它似乎会更新表格。
所以..... getData: function($defer, params){
var data = $scope.yourdata;
varorderedData = .........................
}

我的数据已成功加载到 DOM 上,但是当我从服务器获取数据并希望通过 tableParams.reload() 刷新 ng-table 时,它​​没有反映结果,但是当我单击排序或分页时,它反映了结果。
这是什么问题?

我想支持@basilcronus 的建议,这也对我

与@developersatish 有同样的问题。
等待解决此问题。

大家好。 我最近才开始使用 ngTable。 我有一个类似的问题,尤其是嵌套的 ngTables 和重新加载与父数据分开的数据。 这是一个快速的想法:

父控制器:

var parentData = [...];

$scope.details = -1

$scope.showDetails = 函数 (id) {
$scope.details = id;
};

// ngTable ///////
$scope.tableParams = 新的 ngTableParams({
page: 1, // 显示第一页
count: 10, // 每页计数
排序:{
id: 'asc' // 初始排序
}
}, {
total: parentData.length, // 数据长度
获取数据:函数($延迟,参数){
// 使用内置角度过滤器
varorderedData = params.sorting() ?
$filter('orderBy')(parentData, params.orderBy()) :
父数据;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

在 html 上,我有一个 ng-click 将 id 发送到此并更改详细信息范围。

子控制器(与第一个控制器相关的二级表):

var childData = [...];

$scope.$parent.$watch('details', function () {
console.log("你在这里做到了");
$scope.tableParams2.reload();
});

// 子 ngTable ///////
$scope.tableParams2 = 新的 ngTableParams({
page: 1, // 显示第一页
count: 10, // 每页计数
排序:{
id: 'asc' // 初始排序
}
}, {
total: childData.length, // 数据长度
获取数据:函数($延迟,参数){
// 使用内置角度过滤器
varorderedData = params.sorting() ?
$filter('orderBy')(childData, params.orderBy()) :
子数据;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $data: {} }
});

单击时我可以看到更改,但我的子表没有更新。 不确定这是否有帮助,但我确实认为这是相关的。

你好,
我也遇到了与@developersatish 相同的问题。 表格数据仅在我对表格进行排序或过滤后更新。 这个问题有什么解决办法吗?

我有一个类似的问题。

在单击事件中,我开始从服务器检索数据(多次调用)。
所以我有一个 for 循环,在那里我有 GET 请求,我将返回的结果存储到我想在异步表中绘制的范围变量中。

但是,在单击时,我将表实例化为:

`$scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            Country: 'asc' // initial sorting
        }
    }, {
        total: $scope.continentTableData.length, // length of data
        getData: function($defer, params) {
            for (var i = 0; i < numberOfCountries; i++) {
                try {
                    var country = $("path[class*=" + $scope.currentContinentCountries[i].toUpperCase() + "]")[0].__data__.properties.name;
                    MapService.getInfographicsData(2013, country, function(infrographicsData) {
                        counter++;
                        // debugger;
                        var cpi = infrographicsData[0].data.CPI;
                        var trace = infrographicsData[1].data;
                        var countryName;

                        if (cpi == null) {
                            countryName = trace.Ref_Country;
                        } else {
                            countryName = cpi.Country;
                        }

                        var joinedData = {
                            Country: countryName,
                            Cpi: cpi,
                            Trace: trace
                        }
                        $scope.continentData.push(joinedData);

                        $scope.continentTableData = $scope.continentData;

                        // if (counter==numberOfCountries-1) {
                        //     console.log("tier");
                            $timeout(function() {
                            // update table params
                            params.total($scope.continentTableData.length);
                            // set new data
                            console.log("new data set");
                            $defer.resolve($scope.continentTableData);
                        }, 1500);
                        // };

                    });
                } catch (e) {
                    // console.log(e);
                    continue;
                }                    
            }

            // $scope.$apply();
        }
    });`

就像在带有 ajax 的 ngTable 示例中一样。 但是,表中没有显示任何内容(永远不会调用 getData。)

如果我单击“刷新”tableParams,那么表格将开始加载所有内容,除了每个项目都被复制。

任何的想法?

@developersatish我能够通过复制附加到分页按钮的功能来反映来自服务器的新数据。

$scope.tableParams.count(1);

我把它放在我的请求的回调中。

myRequest().then(function(response) {
    $scope.data = response;
    $scope.tableParams.total($scope.data.length);
    $scope.tableParams.count(1);
});

编辑:

在我原来的帖子中, 1中的$scope.tableParams.count(1)实际上应该替换为一个变量,该变量包含在ngTableParams设置为count的值。
有关工作示例,请参阅http://embed.plnkr.co/harWG3J6OlNHZbOu0e6S/preview

由于这是此问题的最佳搜索结果,我将包括我为解决方案所做的工作。 我只是在 $scope 中存储了 {id,title} 对象的数组,该数组用作 filter-data 函数中 defer.resolve 的参数。 (它最初可能是 / 可能是空的。)然后您可以随时更新该数组,更改将反映在过滤器选择中。 因此,当我的 ajax 调用带回服务器响应时,我会更新它。

同样在我的情况下,表数据集随着用户扩展搜索范围而扩展(增加)。 这要求我还修改(应用差异)选择过滤器。

我试过了,但它不起作用。 你能粘贴你的工作示例吗?

大家好,
我和@almaplayera有同样的问题,我有一个类似的场景

1. dropdown中使用的filterdata来自service

2.为了更新相同的数据,我有一个部分,用户可以从中添加新条目/更新现有条目。

3. 在添加/更新下拉列表的添加/编辑部分过滤器数据中的条目后,一旦表重新加载,该下拉列表应刷新。

我这样做是为了让我的公司数据过滤数据 -

screen4ngtable

之后,我在视图的过滤器数据中调用了 getCompany 方法 -

screen5ngtable

任何人都可以提出任何解决方案以使用来自服务的最新数据更新我的过滤器数据,或者为类似用例提供一些示例。

@esvit :我尝试在 ngTablePrams 中的 getData 回调中获取我的数据并将其绑定到 $scope 之后,我尝试传递相同的变量来过滤数据,以查看类似于https://github.com/esvit 中建议的@israelidanny 的内容/ng-table/pull/342但这对我也不起作用。 :(

PS:我在做 tableParams.reload(); 添加和编辑后。

我不再拥有我的代码,因为我在提交任何事情之前就离开了 ng 表。 但是,从记忆中:

过滤器函数(您的 getCompany 函数)仅在表初始化时调用一次。 因此,只要有记录更改,您就必须将更改应用于已解析的数据数组,并且 angular 会将这些更改应用于 dom。

$scope.company_filter = [];

$scope.getCompanyFilter = function(data) {
  var def = $q.defer();
  companyService.getAll().success(function(response) {
    $scope.updateCompanyFilter(response.data);
    def.resolve($scope.company_filter);
  });
  return def;
};

$scope.updateCompanyFilter = function(data) {
  $scope.company_filter.length = 0;
  for (i in data) {
    $scope.company_filter.push({
        'id': data[i].id,
        'title': data[i].name
    });
  }
};

// Then wherever you refresh your table data, just call updateCompanyFilter(data).
// Or you could micro manage the filter array when you do adds/deletes instead of reseeding it every time.

<td ... filter-data="getCompanyFilter($column)" >

再一次,我可能是错的,因为已经几个月了。

这个问题在最新版本的 ng-table 中解决了吗?

有人可以提供示例代码吗

我不认为是。

现在,我认为制作
可从控制器调用的 controller.loadFilterData 函数
表参数。 然后,当列表更改时,您将能够调用它
你的申请。

C

2015 年 6 月 19 日星期五上午 6:59,rachithaShetty通知@github.com
写道:

这个问题在最新版本的 ng-table 中解决了吗?


直接回复此邮件或在 GitHub 上查看
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084。

:+1: @kyleboyle :你的解决方案有用..! 厉害了……! 非常感谢。

此问题的解决方案(拉取请求 403:https://github.com/esvit/ng-table/pull/403)似乎已在 v0.4.2 中合并,但此后所做的更改已被恢复。

ng-table.js 的第 549 行更改

$scope.$watch('params.$params', function(newParams, oldParams) {

$scope.$watch('[params.$params, params.data]', function(newParams, oldParams) {

这解决了数据正在更新的问题,但表没有刷新以呈现更改。
似乎在此提交中重新引入了此错误: https :

不幸的是$watch 'ing params.data在某些情况下会导致问题:

params.data中的元素是复杂的涉及循环引用时, $watch 'ing _by value_ 会在angular.copy创建深度克隆时导致堆栈溢出异常。

我相信angular.copy的较新版本修复了这个特定问题,但是出于性能原因观看params.data _by value_ 仍然是一个坏主意。

@kyleboyle这段代码完美运行! 谢谢! 并添加 inArray 函数可以过滤掉重复项。

    $scope.manufacturer_filter = [];
    $scope.getManufactFilter = function(column){
        var def = $q.defer();
        ResourseAPI.query(function(data){
            $scope.updateManufactFilter(data.devices);
            def.resolve($scope.manufacturer_filter);
        });
        return def;
    };
    $scope.updateManufactFilter= function(data) {
        var arr = [];

        angular.forEach(data, function (item) {
            if (inArray(item.manufacturer, arr) === -1) {
                arr.push(item.manufacturer);
                $scope.manufacturer_filter.push({
                    'id': item.manufacturer,
                    'title': item.manufacturer
                });
            }
        });
    };

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

@kyleboyle您的解决方案很棒。
有谁知道他们是否可以实现类似但使用 ng-table-dynamic 的东西?
我通过javascript动态加载列。

例子:

var column = {
    title: 'Example',
    sortable: 'example',
    filter: 'example',
        filterData: .....,
    show: true,
    field: 'example'
};

应该设置什么属性filterData? 还是有另一种方法可以重新加载数据过滤器?

有很多不同的方法可以指定选择过滤器将用作数据源的数组。 这些方法中的每一个都适用于ng-tableng-table-dynamic

也许以下代码示例可以帮助您解决问题?

http://codepen.io/christianacca/pen/JdqjxB?editors=101

很好的示例,但我找不到解决我的问题的方法。 在所有示例中,数据仅加载一次(同步或异步),但不会重新加载。

我得到的一个例子是:
我有两列:国家和城市,每一列都有一个过滤器。
所以:

  • 当country filter为null时,提示服务器所有城市。
  • 选择国家过滤器时,询问服务器唯一一个国家的城市适用并更新城市列的过滤器数据。

明白了吗? 对不起我的英语不好。

谢谢回复。

@kyleboyle这些解决方案都不适用于我(我什至没有进行任何过滤),我将其视为代码质量差的标志,即表不会在基础数据更新时更新。 您切换到什么 Angular 表解决方案?

@BartoGabriel我认为你想要做的事情是可能的。 与我共事的一个人通过创建他自己的过滤器模板来解决这个问题,该模板完全按照您所说的去做。 他以类似于以下示例的方式覆盖了 select.html 模板: http ://codepen.io/christianacca/pen/xGeWGX?editors=101

抱歉,我帮不上忙了,只是耽误了时间!

哦顺便说一句,我提到的那个人,他使用了ui-select2

@christianacca感谢您的帮助。 这是非常有用的。
当我有解决方案时,我会分享。

凉爽的 :-)

大家好,我的解决方案是完全错误的还是@kyleboyle只是一个更好的选择?

@telwing您的解决方案对我不起作用,但话说回来,

我也遇到与@developersatish 相同的问题。我也尝试设置 tableParams 计数,但我的 getdata 函数仅在页面加载时调用,同时通过下拉列表过滤数据它无法调用此函数

$scope.tableParams = 新的 ngTableParams({
page: 1, // 显示第一页
count: 8, // 每页计数
排序:{
LastSeen: 'desc' // 初始排序
},
筛选: {
PatientName: '', // 初始过滤器
},
}, {
过滤器开关:真,
getData: 函数 ($defer, params) {
// 使用内置角度过滤器
varfilteredData = params.filter() ?
$filter('filter')($scope.items, params.filter()) :
$scope.items;

        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
        params.total(orderedData.length); // set total for recalc pagination
        $scope.tableParams.count(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));



    }
});
此页面是否有帮助?
0 / 5 - 0 等级

相关问题

andreicristianpetcu picture andreicristianpetcu  ·  6评论

zymr-keshav picture zymr-keshav  ·  10评论

richtmat picture richtmat  ·  7评论

batjko picture batjko  ·  3评论

zeeshanhanif picture zeeshanhanif  ·  5评论