角スマートテーブルにデータを追加するには

Question

私は単純な角スマートテーブルを持っています。データを正しくロードします。いくつかのデータを削除するとテーブルは正しく更新されますが、データを追加するとテーブルは更新されません。誰かが私が間違っていることを知っていますか？助けていただければ幸いです！

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> 

とコントローラ：

（

(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

あなたのボタン "addRandomItemは" あなたのコントローラを保持しているdiv要素の外にあるので、それはそのアクセスすることはできません範囲

<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>