Update table after entering data in the Angularjs database

Asked

Viewed 944 times

1

I have a modal with a form, fill that form and I click the save button and the data is saved in the database, but I have to give a F5 to update the table. How can I update the table after entering this data?

That’s actually how I upload the data from the API:

$scope.colaboradores = colaboradores.data;

Full controller:

angular.module("oraculo").controller("colaboradorController", function($scope, $routeParams, $location, colaboradores, colaboradorAPI){

    $scope.colaboradores = colaboradores.data;

    $scope.adicionarColaborador = function(colaborador){
        colaboradorAPI.saveColaborador(colaborador).success(function(data){
            console.log("Salvar!");
            $scope.colaboradores = colaboradores.data;
            delete $scope.colaborador;
            $scope.colaboradorForm.$setPristine();
        })
        .error(function(response, status){
            console.log("erro "+status);
        });
    }

});

Route Configuration:

angular.module("oraculo").config(function($routeProvider){

    $routeProvider.when("/home", {
        templateUrl: "public/views/colaborador.html",
        controller: "colaboradorController",
        resolve: {
            colaboradores: function(colaboradorAPI){
                return colaboradorAPI.getColaboradores();
            }
        }
    });

    $routeProvider.otherwise({redirectTo: "/home"});

});

I’ve tried putting a $scope.colaboradores = colaboradores.data; in the method adicionarColaborador but it didn’t work.

Save button inside the modal:

<button class="btn btn-success btn-block" ng-click="adicionarColaborador(colaborador)" ng-disabled="colaboradorForm.$invalid" data-dismiss="modal">
    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
    Salvar
</button>
angularjs twitter-bootstrap

  • Try giving a $Scope. $apply() after $Scope.contributors = contributors.data;

  • When I try to give a $scope.$apply(); of that mistake: Error: [$rootScope:inprog] $digest already in progress

  • Remove delete $Scope.contributor;

  • Still the same mistake.

1 answer

1


In your code instead of:

$Scope.contributors = contributors.data

change to:

$Scope.colaboradores.push(collaborator)

Note that you are setting the initial value to $Scope.contributors after saving a new contributor. The correct would be to include the new employee in the existing list.

  • This way it works, but the table is not filled correctly, that is, the row that shows in the table is not the row returned from the bank.

  • Then switch to $Scope.colaboradores.push(data), make sure the date is the contributor that was entered. You need to see what your server returns

  • now after clicking the save button nothing appears in the table

  • What comes in the date variable?

  • that date comes from resolve

  • If it doesn’t work out using resolve i do it the simple way, which is to pass the result of the function that makes the GET to a variable and call it as soon as the function that saves the data is called

  • @Emirmarques Your answer would work if the return was an array and it was iterating the array and pushing position by position, if it was an array this would not appear as expected. Techies which html is responsible for rendering the data and which server return ?

  • Calling collaboratorAPI.getColaborators() does not resolve?

  • Correcting my comment: @Emirmarques Your answer would work if the return was a record. Techies which html is responsible for rendering the data and which server return ?

  • @Felippetadeu did not understand, the item I asked him to push was precisely the collaborator who just received. What happens is that the way it was developed requires another query that returns all the items in the list, in this case the collaboratorAPI.getColaborators()

  • @Felippetadeu is the page contributor.html. The server returns an OK and the data is inserted in the database, but I have to give an F5 to update the table

  • @Techies vc can give a console.log(date) inside the method that saves the data and post here?

  • It shows nothing, it is empty. this date is different from this $scope.colaboradores = colaboradores.data;

  • @Techies then you can run the collaborative methodAPI.getColaborators() inside sucess to get the new list. You also need to analyze whether your API returns the database data

  • Yes, that way I can load the tables. I was just looking for an alternative solution

  • So, I get it, there are alternative ways but everything depends on the return of your API, you can confirm if it returns the serealized object?

  • Yes, it’s returning, the difficulty is just loading the data when using the resolve in the Route configuration, but finally. I will use it in the same simple way.

Show 12 more comments

Browser other questions tagged angularjs twitter-bootstrap

You are not signed in. Login or sign up in order to post.