Wie füge ich Daten zu eckigen Smart-Tabelle

Question

Ich habe eine einfache eckige Smart-Tabelle. Es lädt die Daten korrekt. Wenn ich einige Daten entferne, wird die Tabelle korrekt aktualisiert. Wenn ich jedoch Daten hinzufüge, wird die Tabelle nicht aktualisiert. Weiß jemand, was ich falsch mache? Hilfe wäre sehr willkommen!

HTML:

<div class="container"> 
    <!-- Angular Grid --> 
    <div ng-controller="MainCtrl"> 
     <table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection"> 
     <thead> 
     <tr> 
      <th>first name</th> 
      <th>last name</th> 
      <th>birth date</th> 
      <th>balance</th> 
      <th>email</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="row in displayedCollection"> 
      <td>{{row.naam}}</td> 
      <td>{{row.naam2}}</td>   
      <td> 
      <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger"> 
        <i class="glyphicon glyphicon-remove-circle"> 
        </i> 
        </button></td> 

     </tr> 
     </tbody> 
     </table>  
    </div> 
    <button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button> 
    <div ng-show='busy'>Loading data...</div> 
    </div> 
</div> 

Und der Controller:

(

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .controller('MainCtrl', MainCtrl); 

    MainCtrl.$inject = ['$scope', '$state', 'Auth', '$modal', 'scrapeAPI', '$http', '$alert', 'recommendationsAPI', 'Upload']; 

    function MainCtrl($scope, $state, Auth, $modal, scrapeAPI, $http, $alert, recommendationsAPI, Upload) { 
    $scope.displayedCollection = []; 
    $scope.user = Auth.getCurrentUser(); 
    $scope.rowCollection = []; 
    $scope.recommendation = {}; 
    $scope.recommendations = []; 
    $scope.recommendationPostForm = true; 
    $scope.busy = true; 
    $scope.allData = []; 
    var i = 0; 
    var page = 0; 
    var step = 3; 
    var data1 = []; 

//gets current data 

    recommendationsAPI.getAllRecommendations() 
     .then(function(data) { 
     console.log('looks found '); 
     console.log(data); 
     $scope.recommendations = data.data; 
     for (i = 0; i < $scope.recommendations.length; i++) { 
      $scope.rowCollection.push($scope.recommendations[i]); 
     } 
     $scope.busy = false; 
     }) 
     .catch(function(err) { 
     console.log('failed to get looks ' + err); 
     }); 

    $scope.addRandomItem = function addRandomItem() { 
     $scope.recommendation = { 
      naam: 'tje', 
      naam2: 'tje' 
     }; 
     $scope.recommendations.push($scope.recommendation); 
     for (var j = 1; j < $scope.recommendations.length; j++) { 
      alert ($scope.recommendations[j].guideline); 
     } 
     $scope.rowCollection.push($scope.recommendation); 

    }; 

    // Verwijder recommendation volledig 
    $scope.removeItem = function removeItem(row) { 
      var index = $scope.rowCollection.indexOf(row); 
      if (index !== -1) { 
       recommendationsAPI.deleteRecommendation($scope.rowCollection[index]._id) 
       .then(function(data) { 
       console.log('delete at backend: success');     
       $scope.rowCollection.splice(index, 1); 
       }); 
      } 
     }  

    } 
})(); 

Answer 1

Ihre Schaltfläche "addRandomItem" ist das div aus, die den Controller hält, so kann es nicht sein zugreifen Umfang

<div class="container"> 
    <!-- Angular Grid --> 
    <div ng-controller="MainCtrl"> 
    <table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection"> 
     <thead> 
     <tr> 
      <th>first name</th> 
      <th>last name</th> 
      <th>birth date</th> 
      <th>balance</th> 
      <th>email</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="row in displayedCollection"> 
      <td>{{row.naam}}</td> 
      <td>{{row.naam2}}</td>   
      <td> 
      <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger"> 
       <i class="glyphicon glyphicon-remove-circle"> 
       </i> 
       </button> 
      </td> 
     </tr> 
    </tbody> 
    </table> 
    <button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button>  
    </div> 
    <div ng-show='busy'>Loading data...</div> 
</div>