Populate a table dynamically in Angular

Question

I am new to Angular. I have created an app that, given the click of a button, should trigger a call that gets a set of json objects and populate a specific table. In the following controller code I have managed to populate the table directly without the click of a button (via the this.tableParams), but what I want is to trigger this data fetching process and populate the table only when the populateTable() function is called.How do I do it?

(function() {
'use strict';

angular
    .module('anomalies')
    .controller('controller', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {

        $scope.populateTable = function () {

            //

        }


        this.tableParams = new NgTableParams({}, {
            filterDelay: 300,
            getData: function (params) {
                return $http({
                    method: 'GET',
                    url: '/server/data.json'
                }).then(function (response) {
                    return response.data;
                }, function (response) {
                    $log.log(response);
                    return [];
                });
            }
        });

    }]);

})();

Johannes Reuter · Accepted Answer · 2016-07-08 10:08:20Z

2

Why not creating the NgTableParams-object inside the populateTable-function?

angular
    .module('anomalies')
    .controller('controller', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {

    $scope.populateTable = function () {
      this.tableParams = new NgTableParams({}, {
        filterDelay: 300,
        getData: function (params) {
            return $http({
                method: 'GET',
                url: '/server/data.json'
            }).then(function (response) {
                return response.data;
            }, function (response) {
                $log.log(response);
                return [];
            });
        }
      });
    }.bind(this);




}]);

Not the .bind(this). This ensures the this keyword means the same inside the populateTable-function as in the controller.

edited Jul 8, 2016 at 10:08

answered Jul 8, 2016 at 9:54

Johannes Reuter

3,53921 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ladmerc · Accepted Answer · 2016-07-08 09:56:08Z

1

Move this.tableParams into the $scope.populateTable function. Bind this function to a button in the view e.g <button ng-click="populateTable()">Click Me!</button>

answered Jul 8, 2016 at 9:56

Ladmerc

1,15811 silver badges18 bronze badges

Collectives™ on Stack Overflow

Populate a table dynamically in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related