web-dev-qa-db-fra.com

Comment recharger angularJs ng-table

J'ai un ng-table. J'ai plusieurs tables dans un contrôleur. Je leur attribue des attributs dynamiques, c.-à-d. Ng-table = "tableParams2" ou ng-table = "tableParams3" etc. Ma demande http est envoyée au serveur. Après avoir cliqué 3-4 fois, je vois dans la console que ma table est rechargée. Après données, mes données restent constantes, je ne vois pas le contenu rechargé dans le tableau. Ci-dessous mon code:

Html:

<button ng-click="qualifyX(2)" ></button>

<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false">
<div class="modal-header">
    <a class="close" data-dismiss="modal" data-original-title="" title="">×</a>
    <h4>Possible matched Companies</h4>
</div>
<div class="modal-body" style="padding: 10px;">
    <div id="ptn_qualify_res" class="grid-view">
        <div class="summary"></div>
        <table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">
            <tr ng-repeat="business in $data">
                <td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }">
                    {{business.primary_trading_name}}
                </td>
                <td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }">
                    {{business.primary_entity_name}}
                </td>
                <td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' }">
                    {{business.business_names}}
                </td>
                <td data-title="'Other Trading Name(s)'" sortable="'other_trading_names'" filter="{ 'other_trading_names': 'text' }">
                    {{business.other_trading_names}}
                </td>
                <td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }">
                    {{business.state}}
                </td>
                <td style="width:70px;">
                    <a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link">
                        <button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View &nbsp;</button>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="modal-footer">
    <a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a>
</div>
</div>

App.js

$scope.qualifyX = function(busID) {
    var penModal = $('#popups_container' + busID + ' #pen_popup');
    var pen = $('#popups_container' + busID).next().find('input#Custombusiness_primary_entity_name').val();
    var selectors = {pen: pen, penModal: penModal};
    $http.get(getPtnData + '?ptn=' + selectors.ptn).success(function(data) {
        selectors.ptnModal.find('#ptn_qualify_res').removeClass('grid-view-loading').addClass('grid-view');
        $scope['tableParams' + busID] = new ngTableParams(
                {
                    page: 1, // show first page
                    count: data.length, // count per page
                    sorting:
                            {
                                primary_trading_name: 'asc'     // initial sorting
                            }
                }, {
            total: 0, // length of data
            getData: function($defer, params) {
                var filteredData = params.filter() ?
                        $filter('filter')(data, params.filter()) :
                        data;
                var orderedData = params.sorting() ?
                        $filter('orderBy')(filteredData, params.orderBy()) :
                        data;

                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }); 
    });
};

Créez un Plunker un peu similaire, à chaque clic, je veux recharger la table avec de nouvelles données.

javascriptangularjsngtable
20
Vishal Khode

J'ai eu un problème très similaire où ma table rendait mais ne rechargeait pas sur une action. Ce que vous devez faire est de recharger $ scope.tableParams chaque fois que vous cliquez sur votre bouton. Une méthode simple consiste à envelopper $ scope.tableParams.reload () dans une fonction, puis à appeler cette fonction lorsque l'utilisateur clique sur le bouton.

code du contrôleur:

$scope.doSearch = function () {
    $scope.tableParams.reload();
}

code HTML:

<button ng-click="doSearch()">Search</button>
26
Daniel F

J'ai finalement résolu le problème.

Lorsque j'ai reçu les données de mise à jour pour la table, il est nécessaire de recharger la table comme suit:

$scope.tableData = data;

$scope.tableParams.total($scope.tableData.length);
$scope.tableParams.reload();
12
Fran Herrero

Ce code fonctionne pour moi, écrivez-le dans votre fonction, là où vous obtenez vos données dynamiques

  $scope.tableParams.reload();
  $scope.tableParams.page(1);
  $scope.tableParams.sorting({});
0
Krishna