Как добавить данные в угловую смарт-таблицу

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>