angularjs table not updating when adding items

Question

I doing a post request to a rest api then returning the data I send together with an id then add it to the table but the table is not updating.

$scope.addCategory = function(category){
        $http.post('http://localhost/myappi/API/index.php/Api/categories',category).
                success(function(data)
                {
                    console.log('Data returned: ', data);
                    $scope.categories.push(data);   //add it to the table ?

                })
                .error(function(err) {
                    console.log(err);
                })
    };

And this is my table.

<table class="table table-striped">
        <tr>
            <th>Name</th><th>Action</th>
        </tr>
        <tr ng-repeat="category in categories">
            <td>{{ category.name }}</td><td>
            <button class="btn btn-warning" ng-click="editCategory(category)">Edit</button>
            <button class="btn btn-danger" ng-click="deleteCategory(category.id)">Delete</button></td>

        </tr>
</table>

To populate the table when the page loads I have an init function which returns a list of categories. I could change this method so it triggers whenever the user tampers with the data but it doesn't seem efficient to get all the data from the server when I edit a field for example. Also when I delete a category the data is removed correctly.

// How the table is populated on page load.

$scope.init = function() {
   $http.get('http://localhost/myappi/API/index.php/Api/categories/').
            success(function(data) {
                $scope.categories = data;
                console.log(data);
            })
            .error(function(err) {
                console.log(err);
            })
};

How can I close this question ? I had $scope.categories=[]; at the front of the controller.

How do you init $scope.categories and what is data in response? — dfsq
– dfsq, Commented Jan 9, 2016 at 9:32

Maher · Accepted Answer · 2016-01-09 09:37:06Z

      angular.module("app", []);
        angular.module("app").controller("ctrl", function ($scope) {

            $scope.categories = [];

            $scope.addCategory = function () {

                var data = { name: "newData" };
                $scope.categories.push(data);

                //$http.post('http://localhost/myappi/API/index.php/Api/categories', category).
                //        success(function (data) {
                //            console.log('Data returned: ', data);
                //            $scope.categories.push(data);   //add it to the table ?

                //        })
                //        .error(function (err) {
                //            console.log(err);
                //        })
            };

        });

<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <button ng-click="addCategory()">addCategory</button>
    <table class="table table-striped">
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="category in categories">
            <td>{{ category.name }}</td>
            <td>
                <button class="btn btn-warning" ng-click="editCategory(category)">Edit</button>
                <button class="btn btn-danger" ng-click="deleteCategory(category.id)">Delete</button>
            </td>
        </tr>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

I'm not sure, but if I keep the $scope.categories=[]; where you have it wont work

Cristian · Accepted Answer · 2016-01-09 10:20:08Z

0

Answering it to close the question. I forgot the categories declaration at the front of the controller which caused the table not updating. I moved it inside the init function and this solved it.

$scope.categories=[];

answered Jan 9, 2016 at 10:20

Cristian

2854 silver badges17 bronze badges

Collectives™ on Stack Overflow

angularjs table not updating when adding items

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related