AngularJS refresh smart table after inserting new record in Bootstrap Modal Form

Question

I use angular-bootstrap and and Angular Smart table. I have a modal form which adds new records to database and shows the list in my smart table. Adding new records is working fine but how do I refresh my smart table after a new record is inserted into the database.

Controller

//ajax request to gather data and list in smart table
october.controllers['dashboard/feeds'] = function ($scope, $filter , $request, $modal, $log, $http) {

    $scope.api = $request('onFeeds', {success: function(data, scope){
        this.success(data).done(function() {
            $scope.rowCollection = [];
            $scope.rowCollection = angular.fromJson(data.result);
            $scope.displayedCollection = [].concat($scope.rowCollection);


            });
        }
    });
}

//Modal

var ModalInstanceCtrl = function ($scope, $modalInstance,  $request, $filter) {


    $scope.save = function (data) {

        $request('onAddFeed',

        {data:data, 
                success: function(data){
                this.success(data);
                    $scope.refresh();
                    $modalInstance.close();

            }
        });

    };
};

Template

        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">neue Feed eintragen!</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                  <input type=hidden ng-init="formInfo.user_id = {% endverbatim %} {{ user.id }} ">  
                  {%verbatim %}
                  <div class="form-group">
                    <label for="inputName3" class="col-sm-2 control-label">Feed Name</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="inputName3" placeholder="Feed Name" ng-model="formInfo.name">
                  </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Feed Type</label>
                <div class="col-sm-8">
                  <select ng-model="formInfo.feed_type" class="form-control">
                      <option>Select Feed Source</option>  
                      <option value="api">API</option>
                      <option value="xml">XML</option>
                      <option value="csv">CSV</option>
                      <option value="json">JSON</option>
                      <option value="upload">Upload</option>
                  </select>
              </div>
        </div>

        <div class="form-group" ng-show="formInfo.feed_type =='api'">
            <label for="selectAPI" class="col-sm-2 control-label">Select API</label>
            <div class="col-sm-8">
              <select ng-change="selectAction(item.id)" ng-model="formInfo.network_id" ng-options="item.id as item.name for item in networks" class="form-control"> </select>
            </div>
        </div>

        <div class="form-group" ng-repeat="setup in setups">
            <label for="setup" class="col-sm-2 control-label">{{setup}}</label>
            <div class="col-sm-8">
                <input ng-model="formInfo['api_credentials'][setup]" class="form-control" placeholder="Enter your {{setup}}">

         </div>
        </div>

        <div class="form-group" ng-show="formInfo.feed_type =='xml' || formInfo.feed_type =='csv' ">
            <label for="inputPassword3" class="col-sm-2 control-label">Source</label>
            <div class="col-sm-8">
                <div class="input-group">
                  <div class="input-group-addon"><i class="fa fa-link"></i></div>
                <input ng-model="formInfo.source" type="text" class="form-control" id="sourceInput" placeholder="URL">
        </div>

      </div>
  </div>
</div>
<span>{{formInfo}}</span>
</form>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary" ng-click="save(formInfo)">Save</button>
    <button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>

Can't you just call $scope.api to refresh the table? – Wayne Ellery Jan 10 '15 at 11:10 — Wayne Ellery, Jan 10 '15 at 11:10
I've been trying does not seems to work – fefe Jan 10 '15 at 11:18 — fefe, Jan 10 '15 at 11:18

score 5 · Accepted Answer · answered Jan 10 '15 at 11:27

5

{data:data, 
            success: function(data){
            this.success(data);
                $scope.refresh();
                $modalInstance.close();

        }

In the above code Instead of $scope.refresh() use $route.reload() to Update the records before closing Modal Instance.

reload() Causes $route service to reload the current route even if $location hasn't changed

answered Jan 10 '15 at 11:27

karthik pamidimarri

305
2
12

1

This worked for me, but it seems like you shouldn't have to force a reload. I would've expected just needing to add it to the array that smart-table is watching, but that definitely didn't work. – bbrown Jan 30 '15 at 00:48

score 1 · Answer 2 · answered Sep 26 '16 at 12:27

1

To refresh the smart-table you can add or remove items or just recreate the array.

$scope.tableData = [].concat($scope.tableData);

answered Sep 26 '16 at 12:27

flob

3,760
2
34
57

score 0 · Answer 3 · answered Feb 11 '15 at 20:29

0

The thing that worked for me (and appears to be causing you the problem) is to set displayedCollection to an empty array. Smart Table will fill it with whatever paged, filtered, or sorted data you designate. Something like this:

<table st-table="displayedCollection" st-safe-src="rowCollection">

All of a sudden, rowCollection.push(data) automatically updated the Smart Table.

answered Feb 11 '15 at 20:29

bbrown

6,370
5
37
43

I'm using the Smart Table as your, but this solution is not working for me because it clear the table but not refresh it. – mggSoft Mar 31 '15 at 08:44
Do you set `$scope.displayedCollection = [];` in your controller or do you do the `$scope.displayedCollection = [].concat(rowCollection);`? It will work if you do the first one. – bbrown Apr 01 '15 at 00:36
Yes, I did the first one. Without `$route.reload()` it doesn't work – mggSoft Apr 01 '15 at 07:36

AngularJS refresh smart table after inserting new record in Bootstrap Modal Form

3 Answers3