CODEWITHSUNDEEP
javascriptjqueryangularjsdatatable
ottercoder
ottercoder

Reputation: 862

Angular Datatables ng-click gives no binding (Angular way)

When page is loading first time, I'm getting my thingsList filled. But then I need choose option with ng-click, it triggers function doSomething() which is getting new thingsList. I can see at debug mode that there is a new list, but there's no binding and datatables still showing me the old thingsList.

I'd really like to solve this without dtOptions is it's possible.

I'm using pretty simple "angular way" with datatables:

<tr ng-repeat="thing in thingsList">
   <td>{{thing.id}}</td>
   <td>{{thing.name}}</td>
</tr>

and my controller looks like:

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) {

    this.getThing = function () {
        $http.get(....).then(
            function success(response) {
                $scope.thingsList = response.data;
            },
            function error(data) {
                console.log(data);
            }
        );
    };

    this.getThings();


    this.doSomething = function (id) {
        $http.get(....).then(
            function success(response) {
                $scope.thingsList = response.data;
            },
            function error(data) {
                console.log(data);
            }
        );
    };

}]);

Upvotes: 0

Views: 193

Answers (2)

Vishal Rao
Vishal Rao

Reputation: 912

So I'm guessing the reason its happening is because the getThings() function is being called every time the controller is used. You might want to modify your controller code in this way and try:

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) {

$scope.getThing = function () {
    $http.get(....).then(
        function success(response) {
            $scope.thingsList = response.data;
        },
        function error(data) {
            console.log(data);
        }
    );
};


$scope.doSomething = function (id) {
    $http.get(....).then(
        function success(response) {
            $scope.thingsList = response.data;
        },
        function error(data) {
            console.log(data);
        }
    );
};

}]);

Now this will solve your problem of the list not updating when you choose your option with ng-click but your list won't get loaded by default when you load the page since getThings() isn't being called.

My suggestion for that would be to use use ng-init as described in the answer to this question: How to execute angular controller function on page load?

or better yet use $scope.on in this manner in your code:

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) {

$scope.getThing = function () {
    $http.get(....).then(
        function success(response) {
            $scope.thingsList = response.data;
        },
        function error(data) {
            console.log(data);
        }
    );
};

$scope.$on('$viewContentLoaded', function() {
   $scope.getThing();
})

$scope.doSomething = function (id) {
    $http.get(....).then(
        function success(response) {
            $scope.thingsList = response.data;
        },
        function error(data) {
            console.log(data);
        }
    );
};

}]);

In case you're using routing you can change the '$viewContentLoaded' to '$routeChangeSuccess' for ng-route or '$stateChangeSuccess' if you're using ui-router. (Don't worry about this unless you're using routes to change views)

Upvotes: 1

PJDev
PJDev

Reputation: 983

Try using

$scope.thingsList.splice(0);   // clears the array without losing reference
Array.prototype.push.apply($scope.thingsList, response.data); // inserts new data to existing array

instead of $scope.thingsList = response.data; in doSomething function.

Upvotes: 2

Related Questions