AngularJS refresh intelligente Tabelle nach dem Einfügen neuer Datensatz in Bootstrap Modal Form

Question

Ich benutze eckigen Bootstrap und und eckige Smart-Tabelle. Ich habe ein modales Formular, das neue Datensätze zur Datenbank hinzufügt und die Liste in meiner intelligenten Tabelle zeigt. Das Hinzufügen neuer Datensätze funktioniert einwandfrei, aber wie aktualisiere ich meine intelligente Tabelle, nachdem ein neuer Datensatz in die Datenbank eingefügt wurde.

-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(); 

      } 
     }); 

    }; 
}; 

Vorlage

 <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 dem obigen Code statt $ scope.refresh() verwenden, $ route.reload(), um Aktualisierung der Datensätze vor dem Schließen der Modal Instance.

reload() verursacht $ Dienstweg die aktuelle Route selbst wenn $ Standort neu zu laden nicht geändert hat

Answer 2

Die Sache, die für mich gearbeitet (und scheint das Problem zu verursachen) ist zu Setzen Sie displayedCollection auf ein leeres Array. Smart Table füllt sie mit den von Ihnen angegebenen seitenbezogenen, gefilterten oder sortierten Daten. Etwas wie folgt aus:

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

Ganz plötzlich, rowCollection.push(data) automatisch die Smart-Tabelle aktualisiert.

Answer 3

Um die Smart-Tabelle zu aktualisieren, können Sie Elemente hinzufügen oder entfernen oder einfach das Array erstellen.

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