web-dev-qa-db-ja.com

httpリクエストからロードされたNGテーブルを動的データで更新する方法

Ng-tableのデータを更新できる必要があります。次の画像には、完全なユースケースシナリオが含まれています。 main view ユーザーがBrandIDの検索をクリックすると、新しいモーダルウィンドウが表示されます。 modal1

これには、ロードされたデータを含むngテーブルが含まれています。モーダルが閉じられた後、2番目の検索（GroupID）をクリックすると、ここではng-tableのある同じモーダルウィンドウが開きますが、要求に問題がなく、サーバーからデータが返された場合でも、読み込みは失敗します。 modal2

新しく受信したデータでテーブルを初期化するために、テーブルを更新できるようにしたいと思います。

Plunker のスクリプトは、モーダルが切り替わるたびに呼び出されます。

angularjshttpngtable
7
Susy11

この問題の解決策は ここ にあります。これは良い解決策ではありませんが、今のところ最善です。リクエストごとに異なるカウントを強制することにより、テーブルはそのデータをリロードし、目的の結果が得られます。新しいプランクを見つけることができます ここ リクエストごとにページごとに異なるカウントを持つことの重要性に注意してください。 countプロパティが同じ数に設定されている場合、ソリューションは失敗します。これが明確になることを願っています。また、ng-tableの開発者がこの問題を修正することを願っています。

1
Susy11

これを試して、テーブルデータを更新してください。

$scope.tableParams.reload();

編集：コードにバグの可能性があることがわかりました...これを変更する必要があると思います：

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   $scope.datay;

これに：

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   filteredData;

それはうまくいきますか？

10
erikt

このコード例は機能しているようです。詳細については、次の質問を確認してくださいSO質問： 動的データに対してng-tableが機能しない

// Get data from factory
var data = dataFactory.query();

//Use promise to load data to table, note the replacing of the second tableParams 
//object parameter with a function
data.$promise.then(function (data){
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,
        sorting: {
            name: 'asc'
        },
        filter: {
            name: undefined             
        }
    }, resetTableParams()
    );
});

//The function that replaces the tableParams param
var resetTableParams = function(){
    return {
        total: data.length,
        getData: function($defer, params) {
            var filteredData = params.filter() ? $filter('filter')(data,    params.filter()) : data;
        var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 

        params.total(orderedData.length);
        $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));           
        }
    }
}

//A method to update the table that can be called when closing a modal
var updateTable = function(){
    data = dataFactory.query();
    data.$promise.then(function (data){
        $scope.tableParams.reload();
    });
}

// Add table row to table in modal and call updateTable() on closing modal
$scope.addRow = function(){
    var modalInstance = $modal.open({
        templateUrl: 'resources/partials/newrecord.html',
        controller: NewRecordModalCtrl
    })

    modalInstance.result.then(function(){
        updateTable();
    });
}
1
jvdp

皆さん、今私はこのリポジトリをサポートし、最終的に問題が修正されました v0.4.2 ！

1
iyel