0

here is my controller script, just a simple get. This just loads data in a table

var app = angular.module('myApp', []);
app.controller('inventariosCtrl', function ($scope, $http) {
    $scope.showLoader = true;
    $http.get("api/inventarios").then(function (response) {
        $scope.showLoader = false;
        $scope.inventarios = response.data;
    })
})

and here is jquery ajax post to send a form data that adds a row to the table

$("#btnAdd").click(function () {

    debugger

    var Inventario = {
        "Colaborador": $("#Colaborador").val(),
        "Armazem": $("#Armazem").val(),
        "Total": $("#Total").val(),
        "Data": $("#Data").val(),
    };

    var Localizacoes = [{
        "Referencia": $("#Referencia").val(),
        "EtiquetasPorInventariar": $("#EtiquetasPorInventariar").val(),
        "EtiquetasInventariadas": $("#EtiquetasInventariadas").val(),
        "IsValid": $("#IsValid").val(),
        "Precisao": $("#Precisao").val()
    }]

    Inventario.Localizacoes = Localizacoes;

    $.ajax({
        type: "POST",
        url: 'api/inventarios',
        data: JSON.stringify(Inventario),
        contentType: "application/json;charset=utf-8",
        success: function (data, status, xhr) {
            alert("The result is : " + status + ": " + data);

        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
});

I know i could use angular for post too but i will change that later since i'm just learning to use angular. My question is, how can I call the angular http.get after the ajax call is done with jquery so table is refreshed after submit? I tried this but didn't work

<button id="btnAdd" type="button" ng-click="inventariosCtrl">
    Submit data
</button>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Jackal
  • 3,359
  • 4
  • 33
  • 78
  • 2
    When you mix AngularJS and jQuery like this, you are asking for trouble. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. The jQuery ajax method is not integrated with the AngularJS framework and its digest cycle. – georgeawg Mar 16 '19 at 18:03
  • 1
    Also read [AngularJS Developer Guide - Simple Forms](https://docs.angularjs.org/guide/forms). The key directive in understanding two-way data-binding is [ngModel](https://docs.angularjs.org/api/ng/directive/ngModel). The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. – georgeawg Mar 16 '19 at 18:11
  • i searched a bit and got same answer but just thought there was a chance to do this just for "testing" purposes. Guess i'll just change it to angular – Jackal Mar 16 '19 at 18:21
  • 1
    With AngularJS all those `.val()` calls go away and the `$http.post` call is simpler as well. Your approach becomes a [Russian Doll Problem](https://meta.stackexchange.com/questions/188625/etiquette-for-russian-doll-questions). It creates more problems than it solves. – georgeawg Mar 16 '19 at 18:32

0 Answers0