AngularJS updates smart table after inserting new record into Bootstrap modular form

Question

I am using angular-bootstrap and Angular smart table. I have a modal form that adds new entries to the database and shows a list in my smart table. Adding new records works fine, but how to update my smart table after adding a new record to 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> 

Answer 1

 {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 entries before closing the modal instance.

reload () Causes $ route service to reload the current route, even if $ location has not changed

Answer 2

To update a smart table, you can add or remove items, or simply recreate the array .

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

Answer 3

What worked for me (and seems to be causing you a problem) is to set displayedCollection to an empty array. The smart table will fill it with any scanned, filtered or sorted data. Something like that:

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

Suddenly rowCollection.push(data) automatically updated the smart table.