Ng-table: tableParams.reload() tidak memuat ulang data filter

Dibuat pada 27 Jan 2014  ·  30Komentar  ·  Sumber: esvit/ng-table

saya menggunakan tableParams.reload() (dan params.total(filteredData.length)) yang memuat ulang tabel dengan data eksternal baru, tetapi pilihan dalam filter "select" dan "select-multiple" tidak berubah. tableParams.reload() harus memanggil fungsi "filter-data" lagi, bukan? apakah ada cara lain untuk mencapai ini?

Komentar yang paling membantu

Data saya berhasil dimuat di DOM tetapi ketika saya mengambil data dari server dan ingin menyegarkan tabel-ng oleh tableParams.reload() itu tidak mencerminkan hasilnya, tetapi ketika saya mengklik pengurutan atau paging maka itu mencerminkan hasilnya.
masalah apa yang bisa ini?

Semua 30 komentar

Hai, yang di sana. Pertama-tama - terima kasih untuk proyeknya.
Saya memiliki masalah yang sama. Saya perlu memperbarui filter dengan data yang diambil dari server, tetapi tidak tahu cara memicu fungsi filter-data.

Saya menemukan bahwa jika Anda mendeklarasikan data Anda tepat di dalam fungsi getData, tampaknya akan memperbarui tabel.
Jadi..... getData: function($defer, params){
var data = $scope.dataanda;
var orderData = ...............................
}

Data saya berhasil dimuat di DOM tetapi ketika saya mengambil data dari server dan ingin menyegarkan tabel-ng oleh tableParams.reload() itu tidak mencerminkan hasilnya, tetapi ketika saya mengklik pengurutan atau paging maka itu mencerminkan hasilnya.
masalah apa yang bisa ini?

Saya ingin mendukung apa yang disarankan

Punya masalah yang sama dengan @developersatish.
Tunggu resolusi untuk masalah ini.

Halo semuanya. Saya baru saja mulai menggunakan ngTable. Saya mengalami masalah serupa terutama dengan ngTable bersarang dan memuat ulang data secara terpisah ke data induk. di sini adalah ide cepat:

pengontrol orang tua:

var parentData = [...];

$scope.details = -1

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

// ngTabel ////////
$scope.tableParams = new ngTableParams({
halaman: 1, // tampilkan halaman pertama
hitung: 10, // hitung per halaman
menyortir: {
id: 'asc' // pengurutan awal
}
}, {
total: parentData.length, // panjang data
getData: function($defer, params) {
// gunakan filter sudut bawaan
var orderData = params.sorting() ?
$filter('orderBy')(parentData, params.orderBy()) :
data induk;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

pada html saya memiliki ng-klik untuk mengirim id ke ini dan mengubah cakupan detail.

Pengontrol anak (Tabel sekunder yang terkait dengan pengontrol pertama):

var data anak = [...];

$scope.$parent.$watch('details', function() {
console.log("Anda berhasil sampai di sini");
$scope.tableParams2.reload();
});

// anak ngTabel ////////
$scope.tableParams2 = new ngTableParams({
halaman: 1, // tampilkan halaman pertama
hitung: 10, // hitung per halaman
menyortir: {
id: 'asc' // pengurutan awal
}
}, {
total: childData.length, // panjang data
getData: function($defer, params) {
// gunakan filter sudut bawaan
var orderData = params.sorting() ?
$filter('orderBy')(childData, params.orderBy()) :
data anak;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$lingkup: { $data: {} }
});

Saya dapat melihat perubahannya ketika saya mengklik tetapi tabel anak saya tidak diperbarui. Tidak yakin apakah ini membantu, tetapi saya pikir ini terkait.

Hai,
Saya juga mengalami masalah yang sama dengan @developersatish. Data tabel hanya diperbarui setelah saya mengurutkan atau memfilter tabel. Apakah ada solusi untuk masalah ini?

Saya memiliki masalah serupa.

Pada acara klik saya mulai mengambil data dari server (beberapa panggilan).
Jadi saya memiliki for loop dan di sana saya memiliki permintaan GET dan saya menyimpan hasil yang kembali ke variabel cakupan yang ingin saya plot dalam tabel async.

Namun saat klik saya membuat instance tabel saya sebagai berikut:

`$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();
        }
    });`

seperti pada contoh ngTable dengan ajax. Namun tidak ada yang ditampilkan dalam tabel (getData tidak pernah dipanggil.)

Jika saya mengklik "refresh" tableParams, maka tabel mulai memuat semuanya kecuali bahwa setiap item diduplikasi.

Ada ide?

@developersatish Saya dapat mencerminkan data baru dari server dengan menyalin fungsionalitas yang dilampirkan ke tombol pagination.

$scope.tableParams.count(1);

Saya menempatkan ini di panggilan balik permintaan saya.

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

Sunting:

Dalam posting asli saya, 1 di $scope.tableParams.count(1) sebenarnya harus diganti dengan variabel yang berisi nilai yang disetel ke count di ngTableParams .
Lihat http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview untuk contoh kerja.

Karena ini adalah hasil pencarian teratas untuk masalah ini, saya akan menyertakan apa yang saya lakukan untuk solusi saya. Saya hanya menyimpan di $scope array objek {id,title} yang digunakan sebagai argumen untuk defer.resolve dalam fungsi filter-data. (bisa jadi / mungkin kosong pada awalnya.) Anda kemudian dapat memperbarui array itu kapan saja dan perubahannya akan tercermin dalam pemilihan filter. Jadi saya memperbaruinya ketika panggilan ajax saya mengembalikan respons server.

Juga dalam kasus saya, kumpulan data tabel meluas (ditambah) saat pengguna memperluas rentang pencarian. Ini mengharuskan saya juga memodifikasi (menerapkan diff ke) filter pilih.

Saya mencoba itu tetapi tidak berhasil. Bisakah Anda menempelkan contoh kerja Anda?

Hai teman-teman,
Saya memiliki masalah yang sama dengan @almaplayera , saya memiliki skenario seperti

1. Filterdata yang digunakan dalam dropdown berasal dari layanan

2. Dan untuk memperbarui data yang sama saya memiliki bagian dari mana pengguna dapat menambahkan entri baru/memperbarui yang sudah ada.

3. Setelah Menambahkan/Memperbarui entri dari tambahkan/edit bagian filterdata untuk dropdown, dropdown itu harus di-refresh setelah tabel dimuat ulang.

Saya melakukan ini untuk mendapatkan data perusahaan saya ke filter-data -

screen4ngtable

Setelah itu saya memanggil Metode getCompany di filter-data pandangan saya -

screen5ngtable

Adakah yang bisa menyarankan solusi apa pun untuk memperbarui data filter saya dengan data terbaru dari layanan Atau berikan beberapa contoh untuk kasus penggunaan yang sama.

@esvit : saya telah mencoba untuk mendapatkan data saya di getData callback di ngTablePrams dan mengikatnya ke $scope setelah itu saya mencoba meneruskan variabel yang sama ke filter-data dalam tampilan seperti yang disarankan @israelidanny di https://github.com/esvit /ng-table/pull/342 tetapi itu juga tidak berhasil untuk saya. :(

PS : saya melakukan tableParams.reload(); setelah menambahkan & mengedit.

Saya tidak lagi memiliki kode saya karena saya beralih dari tabel ng sebelum saya melakukan apa pun. Namun, pergi dari memori:

Fungsi filter (fungsi getCompany Anda) hanya dipanggil sekali pada tabel init. Jadi, Anda harus menerapkan perubahan pada larik data yang diselesaikan setiap kali ada perubahan catatan dan sudut akan menerapkan perubahan itu ke 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)" >

Sekali lagi, saya bisa salah karena sudah beberapa bulan.

Apakah masalah ini diperbaiki di ng-table versi terbaru?

Bisakah seseorang memberikan contoh kode

Saya tidak berpikir itu.

Sekarang, saya tidak berpikir itu akan terlalu sulit untuk membuat
fungsi controller.loadFilterData tersedia untuk dipanggil dari
tablParams. Anda kemudian dapat memanggil ini ketika daftar berubah
aplikasi Anda.

C

Pada Jumat, 19 Jun 2015 jam 6:59, rachithaShetty [email protected]
menulis:

Apakah masalah ini diperbaiki di ng-table versi terbaru?


Balas email ini secara langsung atau lihat di GitHub
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084.

:+1: @kyleboyle : solusi Anda sangat bagus sobat, itu berhasil untuk saya..! Keangkeran...! Terima kasih banyak.

Tampaknya resolusi untuk masalah ini (Permintaan tarik 403: https://github.com/esvit/ng-table/pull/403) digabungkan dalam v0.4.2, tetapi perubahan yang dibuat telah dikembalikan.

Pada baris 549 dari ng-table.js berubah

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

Ini menyelesaikan masalah dengan data yang diperbarui, tetapi tabel tidak menyegarkan untuk membuat perubahan.
Tampaknya bug ini diperkenalkan kembali dalam komit ini: https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

Sayangnya $watch 'ing params.data menyebabkan masalah dalam keadaan tertentu:

ketika elemen dalam params.data kompleks yang melibatkan referensi melingkar, $watch 'ing _by value_ menyebabkan pengecualian stack overflow ketika angular.copy membuat klon yang dalam.

Saya percaya versi angular.copy memperbaiki masalah khusus ini, namun masih merupakan ide yang buruk untuk menonton params.data _berdasarkan nilai_ karena alasan kinerja.

@kyleboyle Kode ini bekerja dengan sempurna! Terima kasih! Dan menambahkan fungsi inArray dapat menyaring duplikat.

    $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 Solusi Anda bagus.
Adakah yang tahu apakah mereka bisa mengimplementasikan sesuatu yang serupa tetapi menggunakan ng-table-dynamic?
Saya memuat kolom secara dinamis dengan javascript.

Contoh:

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

Apa yang harus mengatur filterData properti? Atau adakah cara lain untuk memuat ulang filter data?

Ada banyak cara berbeda untuk menentukan larik yang akan digunakan filter pilih sebagai sumber data. Masing-masing metode ini berlaku untuk ng-table dan ng-table-dynamic .

Mungkin contoh kode berikut dapat membantu Anda menemukan sesuatu?

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

Sampel bagus, tetapi saya tidak dapat menemukan solusi untuk masalah saya. Dalam semua contoh, data dimuat hanya sekali (sinkronisasi atau asinkron) tetapi tidak dimuat ulang.

Contoh yang saya dapatkan adalah:
Saya memiliki dua kolom: Negara dan kota, masing-masing dengan filter.
Jadi:

  • Ketika filter negara adalah nol, diminta server semua kota.
  • Saat filter negara dipilih, tanyakan server satu-satunya kota yang diterapkan negara tersebut dan perbarui kolom filterData kota.

Hal ini dipahami? Maaf untuk bahasa Inggris saya.

Terima kasih balasannya.

@kyleboyle tidak ada solusi ini yang berfungsi untuk saya (saya bahkan tidak melakukan pemfilteran apa pun) dan saya menganggapnya sebagai tanda kualitas kode yang buruk sehingga tabel tidak memperbarui ketika data yang mendasarinya melakukannya. Solusi tabel Angular apa yang Anda gunakan?

@BartoGabriel Saya pikir apa yang Anda coba lakukan adalah mungkin. Seorang pria yang bekerja dengan saya memecahkan masalah dengan membuat templat filternya sendiri yang melakukan persis seperti yang Anda katakan. Dia mengganti template select.html dengan cara yang mirip dengan contoh berikut: http://codepen.io/christianacca/pen/xGeWGX?editors=101

Maaf saya tidak bisa lebih membantu, hanya mendorong waktu!

Oh BTW, pria yang saya sebutkan, dia menggunakan ui-select2

@christianacca terima kasih atas bantuan Anda. Itu sangat berguna.
Nanti kalau ada solusinya saya share.

Dingin :-)

Hai teman-teman, apakah solusi saya benar-benar salah atau @kyleboyle hanya alternatif yang lebih baik?

@telwing solusi Anda tidak berhasil untuk saya, tetapi sekali lagi, @kyleboyle juga tidak. Saya sebenarnya tidak melakukan pemfilteran apa pun. Saya hanya menyortir data dari array, $scope.users. Ketika saya menghapus elemen dari array itu dan memanggil reload() pada parameter tabel, tidak ada yang terjadi. Benar-benar mengejutkan bahwa hal seperti ini sangat rumit kecuali saya melewatkan sesuatu yang mendasar.

Saya juga mengalami masalah yang sama dengan @developersatish.i juga mencoba mengatur jumlah tableParams tetapi fungsi getdata saya memanggil hanya saat memuat halaman saat memfilter data dengan daftar drop-down, ia tidak dapat memanggil fungsi ini

$scope.tableParams = new ngTableParams({
halaman: 1, // tampilkan halaman pertama
hitung: 8, // hitung per halaman
menyortir: {
LastSeen: 'desc' // penyortiran awal
},
Saring: {
Nama Pasien: '', // filter awal
},
}, {
Sakelar filter: benar,
getData: function ($defer, params) {
// gunakan filter sudut bawaan
var filteredData = params.filter() ?
$filter('filter')($scope.items, params.filter()) :
$lingkup.item;

        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()));



    }
});
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

faceleg picture faceleg  ·  11Komentar

wayjake picture wayjake  ·  6Komentar

alienriquebm picture alienriquebm  ·  6Komentar

batjko picture batjko  ·  3Komentar

andreicristianpetcu picture andreicristianpetcu  ·  6Komentar