AngularJS aggiorna la smart table dopo aver inserito il nuovo record nel modulo modale Bootstrap

Question

Uso il bootstrap angolare e la tabella Smart angolare. Ho un modulo modale che aggiunge nuovi record al database e mostra l'elenco nella mia tabella intelligente. L'aggiunta di nuovi record funziona correttamente, ma come faccio ad aggiornare la mia smart table dopo che un nuovo record è stato inserito nel 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(); 

     } 

Nel codice Invece di $ scope.refresh sopra() utilizzare $ route.reload() per Aggiornare il record prima di chiudere l'istanza modale.

reload() Provoca $ servizio di percorso per ricaricare il percorso corrente, anche se $ posizione non è cambiata

Answer 2

La cosa che ha funzionato per me (e sembra essere causando il problema) è quello di impostare displayedCollection su un array vuoto. Smart Table lo riempirà con qualsiasi dato impaginato, filtrato o ordinato che hai designato. Qualcosa di simile a questo:

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

Tutto ad un tratto, rowCollection.push(data) aggiornati SMART Table.

Answer 3

Per aggiornare lo smart-table è possibile aggiungere o rimuovere articoli o semplicemente ricreare l'array.

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