Refresh ng-repeat rows when new data is added to source using parse.com

Question

I have this AngularJS controller which fetches data from a class I have created on parse.com

app.controller('dataCtrl', function($scope) {

    var MarketingData = Parse.Object.extend('MarketingData');
    
    var query = new Parse.Query(MarketingData);

    query.find({
        success: function(results) {
            $scope.$apply(function() {
                $scope.resultData = results.map(function(obj) {
                    return {
                        startDate: obj.get('StartDate'),
                        endDate: obj.get('EndDate'),
                        investment: obj.get('Investment'),
                        format: obj.get('Format'),
                        partner: obj.get('Partner'),
                        purpose: obj.get('Purpose')
                    }
                });
            });
        }
    });

});

Together with this HTML

<tr ng-repeat="x in resultData">
    <td>{{x.startDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.endDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.investment}}</td>
    <td>{{x.format}}</td>
    <td>{{x.partner}}</td>
    <td>{{x.purpose}}</td>
</tr>

How can I bind a button to refresh the rows with new data (new rows)? I'm fairly new to both parse.com and AngularJS.

Answer 1

You should put your code to get data inside a function, then call that function when you press on the refresh button.

I'd write it like it :

app.controller('dataCtrl', function($scope) {

function getData() {
    var MarketingData = Parse.Object.extend('MarketingData');

    var query = new Parse.Query(MarketingData);

    query.find({
        success: function(results) {
            $scope.$apply(function() {
                $scope.resultData = results.map(....);
            });
        });
    });
};

getData(); //Get data on launch

$scope.refreshData = function() { 
    getData();
}

});

In the HTML, just add :

<button value="Refresh" ng-click="getData()"></button>