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件

やあ。 まず第一に-プロジェクトに感謝​​します。
私も同じ問題を抱えてる。 サーバーからフェッチしたデータでフィルターを更新する必要がありますが、filter-datafuncをトリガーする方法がわかりません。

getData関数内でデータを宣言すると、テーブルが更新されるように見えることがわかりました。
だから..... getData:function($ defer、params){
var data = $ scope.yourdata;
varorderedData =..............................。
}

データはDOMに正常に読み込まれますが、サーバーからデータをフェッチし、tableParams.reload()でng-tableを更新したい場合、結果は反映されませんが、並べ替えまたはページングをクリックすると、結果が反映されます。
これはどのような問題になる可能性がありますか?

@basilcronusが提案したことを2番目にしたいと思います。これも私にとっては

@developersatishでも同じ問題が発生しました。
この問題の解決を待ちます。

皆さんこんにちは。 最近ngTableを使い始めました。 特にネストされたngTableと、親データとは別にデータを再ロードする場合に、同様の問題が発生します。 ここに簡単なアイデアがあります:

親コントローラー:

var parentData = [...];

$ scope.details = -1

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

// ngTable ////////
$ scope.tableParams = new ngTableParams({
ページ:1、//最初のページを表示
カウント:10、//ページごとのカウント
並べ替え:{
id: 'asc' //初期ソート
}
}、{
合計:parentData.length、//データの長さ
getData:function($ defer、params){
//組み込みの角度フィルターを使用
varorderedData = params.sorting()?
$ filter( 'orderBy')(parentData、params.orderBy()):
parentData;
$ defer.resolve(orderedData.slice((params.page()-1)* params.count()、params.page()* params.count()));
}
});

HTMLで、ng-clickを使用して、これにIDを送信し、詳細スコープを変更します。

子コントローラー(最初のコントローラーに関連する2番目のテーブル):

var childData = [...];

$ scope。$ parent。$ watch( 'details'、function(){
console.log( "ここで作成しました");
$ scope.tableParams2.reload();
});

//子ngTable ////////
$ scope.tableParams2 = new ngTableParams({
ページ:1、//最初のページを表示
カウント:10、//ページごとのカウント
並べ替え:{
id: 'asc' //初期ソート
}
}、{
合計:childData.length、//データの長さ
getData:function($ defer、params){
//組み込みの角度フィルターを使用
varorderedData = params.sorting()?
$ filter( 'orderBy')(childData、params.orderBy()):
childData;
$ 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が呼び出されることはありません)。

「refresh」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)実際に値セットを含む変数に置き換える必要がありますcountngTableParams
実用的な例については、 http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/previewを参照して

これはこの問題の上位の検索結果であるため、ソリューションに対して行ったことを含めます。 filter-data関数のdefer.resolveへの引数として使用される{id、title}オブジェクトの配列を$ scopeに格納しただけです。 (最初は空である可能性があります。)その後、いつでもその配列を更新でき、変更はフィルター選択に反映されます。 だから私はajax呼び出しがサーバーの応答を返すときにそれを更新します。

また、私の場合、ユーザーが検索範囲を拡大すると、テーブルデータセットが拡大(拡張)されます。 これには、選択フィルターも変更(差分を適用)する必要があります。

私はそれを試しましたが、うまくいきません。 作業例を貼り付けてもらえますか?

やあみんな、
@almaplayeraと同じ問題があり、次のようなシナリオがあります

1.ドロップダウンで使用されるfilterdataはサービスからのものです

2.同じデータを更新するために、ユーザーが新しいエントリを追加したり、既存のエントリを更新したりできるセクションがあります。

3.ドロップダウンの追加/編集セクションfilterdataからのエントリを追加/更新した後、テーブルがリロードされたらドロップダウンを更新する必要があります。

私は会社のデータをフィルターデータにするためにこれを行っています-データ

screen4ngtable

その後、フィルターでgetCompanyメソッドを呼び出しました-ビューのデータ-

screen5ngtable

誰かが私のフィルターデータをサービスからの最近のデータで更新するための解決策を提案できますか、または同様のユースケースのいくつかの例を提供してください。

@esvit :ngTablePramsのgetDataコールバックでデータを取得し、それを$ scopeにバインドしようとしましたその後https: //github.com/esvitで提案されている。 / ng-table / pull / 342ですが、それも私には機能しません。 :(

PS:私はtableParams.reload();をやっています。 追加&編集後。

何かをコミットする前にngテーブルから切り替えたため、コードがなくなりました。 ただし、メモリから移動します。

フィルタ関数(getCompany関数)は、テーブルの初期化で1回だけ呼び出されます。 したがって、レコードに変更がある場合は常に、解決されたデータ配列に変更を適用する必要があり、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関数をから呼び出すことができます
tablParams。 リストが変更されたときにこれを呼び出すことができます
あなたの申請。

C

6:59で金、2015年6月19日には、rachithaShetty [email protected]
書きました:

この問題は、最新バージョンの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内の要素が循環参照を含む複雑な場合、 angular.copyがディープクローンを作成すると、 $watch 'ing _byvalue_によってスタックオーバーフロー例外が発生します。

新しいバージョンのangular.copyこの特定の問題が修正されると思いますが、パフォーマンス上の理由から、 params.data値で監視することは依然として悪い考えです。

@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

良いサンプルですが、問題の解決策が見つかりません。 すべての例で、データは1回だけロードされます(同期または非同期)が、リロードされません。

私が得るものの例は次のとおりです。
国と都市の2つの列があり、それぞれにフィルターがあります。
そう:

  • 国フィルターがnullの場合、サーバーにすべての都市を要求します。
  • 国フィルターが選択されている場合、その国が適用される唯一の都市をサーバーに要求し、都市のfilterData列を更新します。

分かりますか? 英語でごめんなさい。

返信いただきありがとうございます。

@kyleboyleこれらのソリューションはどれも私には機能せず(フィルタリングも行っていません)、基になるデータが更新されたときにテーブルが更新されないというコード品質の低さの兆候と

@BartoGabrielあなたがやろうとしていることは可能だと思います。 私が一緒に働いていた男は、あなたが言ったことを正確に実行する独自のフィルターテンプレートを作成することで問題を解決しました。 彼は、次の例と同様の方法でselect.htmlテンプレートを上書きしました: http ://codepen.io/christianacca/pen/xGeWGX?editors = 101

申し訳ありませんが、これ以上お役に立てることはありません。

ところで、私が言った男、彼はui-select2を使用し

@christianaccaあなたの助けに感謝します。 とても役に立ちました。
私が解決策を持っているとき、私は共有します。

涼しい :-)

こんにちはみんな、私の解決策は完全に間違っていますか、それとも@kyleboyleのより良い選択肢ですか?

@telwing your solutionは私にはうまくいきませんでしたが、 いきませんでした。 ただし、実際にはフィルタリングを行っていません。 配列$ scope.usersからデータを並べ替えているだけです。 その配列から要素を削除し、テーブルパラメータでreload()を呼び出すと、何も起こりません。 基本的なものが欠けていない限り、このようなものが非常に複雑であることは本当に驚くべきことです。

@ developersatish.iもtableParamsカウントを設定しようとしたのと同じ問題がありますが、ドロップダウンリストでデータをフィルタリングしているときにページの読み込み時にのみgetdata関数が呼び出され、この関数を呼び出すことができません

$ scope.tableParams = new ngTableParams({
ページ:1、//最初のページを表示
カウント:8、//ページごとのカウント
並べ替え:{
LastSeen: 'desc' //初期ソート
}、
フィルター: {
PatientName: ''、//初期フィルター
}、
}、{
filterSwitch:true、
getData:function($ 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 評価