fuerteVentura22 fuerteVentura22 - 6 months ago 175
AngularJS Question

Refresh table after an insert/update in AngularJS

My webapp is a CRUD in which there is a list of users and operations associated with them (insert, delete, ecc).
To add a user must fill in the fields of a modal ( bootstrap - ui ).
The problem is that the list is not updated automatically after insertion.

This is my code:
HTML:

...
ng-repeat="p in list"
...


JS:

var app = angular.module('app', [ 'ui.bootstrap', 'ngResource' ]);

app.controller("FirstController", [
'$scope',
'ElementFactory',
'ElementsFactory',
'$uibModal',
function($scope, ElementFactory, ElementsFactory, $uibModal) {

$scope.list = ElementsFactory.query();

$scope.add = function() {

var modalAddInstance = $uibModal.open({
animation : true,
templateUrl : 'addModal.html',
controller : 'addModalController',
resolve : {
element : function() {
return $scope.element;
}
}
});
};

} ]);

app.controller("addModalController", function($scope, $uibModalInstance,
ElementsFactory, element) {

$scope.element = element;



$scope.addCancel = function() {
$uibModalInstance.dismiss('cancel');
};

$scope.addElement = function() {
ElementsFactory.create($scope.element, function(){
//REFRESH TABLE HERE **********************
$uibModalInstance.close();
});



};

});

app.factory('ElementsFactory', [ '$resource', function($resource) {
return $resource('rest/all', {}, {
query : {
method : 'GET',
isArray : true
},
create : {
method : 'POST'
}
});
} ]);


Once add the new item , this is only visible after page refresh and not automatically . What is the code to be inserted where I indicated to you that the table will automatically update ?

Don Don
Answer

You need to add new item to $scope.list in FirstController. You are nowhere updating $scope.list once the new item is added.

    app.controller("addModalController", function($rootScope,$scope, $uibModalInstance,
            ElementsFactory, element) {

        $scope.element = element;



        $scope.addCancel = function() {
            $uibModalInstance.dismiss('cancel');
        };

        $scope.addElement = function() {
            ElementsFactory.create($scope.element, function(){
                //REFRESH TABLE HERE ********************** 
                $rootScope.$broadcast("Element Added");
                $uibModalInstance.close();
            });



        };

    });

app.controller("FirstController", [
        '$scope',
        'ElementFactory',
        'ElementsFactory',
        '$uibModal',
        function($scope, ElementFactory, ElementsFactory, $uibModal) {

            $scope.list = ElementsFactory.query();  

            $scope.add = function() {

                var modalAddInstance = $uibModal.open({
                    animation : true,
                    templateUrl : 'addModal.html',
                    controller : 'addModalController',
                    resolve : {
                        element : function() {
                            return $scope.element;
                        } 
                    }
                });
            };

            $scope.$on("Element Added",function(pevent,padata){
             $scope.list = ElementsFactory.query(); 
           })
        } ]);