Adding dynamic row to ngTable not displaying

Question

I have created an application with ngTable using grouping functionality, The application is working fine but the problem is that when I add dynamic data (rows) to the table, its not reflecting dynamically, unless or otherwise when we click the table title for sorting or when we click the pagination

I have recreated the problem within a plunker, there you can find a button, when clicked one Dynamic row is added but not reflecting within the table

PLUNKER

  <body ng-app="main" ng-controller="DemoCtrl">
  <button ng-click="addDynamicDatas()">Add Datas</button>
    <table ng-table="tableParamsOne" class="table">
      <tbody ng-repeat="group in $groups">
        <tr class="ng-table-group" ng-hide="group.data[0].role==='None'">
          <td>
              <strong>{{ group.value }}</strong>
          </td>
        </tr>

        <tr ng-repeat="user in group.data">
          <td sortable="name" data-title="'Name'">
               <span ng-class="{'bold-text': user.role=='None'}" ng-show="user.role==='None'"> {{user.name}}</span>
            </td>
          <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>
  </body>

add function

$scope.addDynamicDatas = function()
{
   $scope.myDataOne.push({name: "Abcd", age: 10, role: 'Administrator'});
}

Can anyone please tell me some solution for this?

Bradley MIller · Accepted Answer · 2014-11-03 13:00:19Z

5

This is probably not an ideal solution but is the only one that I could find.

You can add $scope.tableParamsOne.reload(); after you update your array.

Also currently when your grid is updating when you click a header it is not updating the amount of pages in the pagination. To solve this you can add $scope.tableParamsOne.total($scope.myDataOne.length);

answered Nov 3, 2014 at 13:00

Bradley MIller

5841 gold badge5 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zipper · Accepted Answer · 2017-11-15 08:20:12Z

0

I am also using ng-table(@4.0.0) to make local/client-side insertion/deletion after a successful server submit and got the similar problem of update ng-table. @Bradley's answer above does not work directly. So I chased the source code and found that the reload() called the getData(). After insert a row into the target rowset (ctrl.tbContents.rows in my case), I have to add bellow line in mytbParams definition to make ctrl.tbParams.reload() work:

getData: function() {
  return ngTableDefaultGetData(ctrl.tbContents.rows, ctrl.tbParams);
}

Note to inject the ngTableDefaultGetData.

answered Nov 15, 2017 at 8:20

zipper

3971 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

Adding dynamic row to ngTable not displaying

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related