how to make an http call when sending form in angular

Question

how to make an http call when sending form in angular

Navigation

#1 by (1 votes)

1

I have problems making an http call when sending a form using Angular, the problem is that I do not know how to pass a parameter to it and I do not know if I am doing the call correctly, what I want is that the HTTP call is made with the parameter that is written in the label of the form. The php returns a json that is painted in tablaResul.

Html Code:

<form id="form1" class="contacto" ng-submit="search()" >
<h3>Formulario de búsqueda</h3>

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table id="buscador">
    <tr>
        <td>
            <input type="text" placeholder="Buscar aqu&iacute;..." required ng-model="nombreLibro">
            <button type="submit" >Buscar</button>
        </td>

    </tr>
 </table>

</br></br>


<table id="tablaResul">
  <tr ng-repeat="x in names">
    <td>{{ x.autor }}</td>
    <td>{{ x.nombre }}</td>
    <td>{{ x.fecha_publicacion }}</td>
  </tr>
</table>
</form>

Script with the function in the controller that does not return anything:

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

    $scope.search = function() {
        $http({
            url: "consulta.php", 
            method: "GET",
            params: {name: $scope.nombreLibro}
         }).then(function (response) {$scope.names = response.data.records;});
    }
});
</script>

Script that works correctly thanks to which I know that the HTTP call is done well and it paints me in tablaResul the information that the php returns:

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

    $http({
        url: "consulta.php", 
        method: "GET",
        params: {name: "1984"}
     }).then(function (response) {$scope.names = response.data.records;});

});
</script>

javascript html angularjs

asked by Francisco Pagan 01.07.2016 в 20:04

source

1 answer

Use the variable of another Sub VBA Primefaces - The variable is not updated

score 1 · Accepted Answer

HTML

<form id="form1" class="contacto" method="POST">
  <h3>Formulario de búsqueda</h3>

  <div ng-app="myApp" ng-controller="customersCtrl"> 
    <table id="buscador">
      <tr>
        <td>
          <input type="text" placeholder="Buscar aqu&iacute;..." required ng-model="nombreLibro">
          <button type="submit" ng-click="search(nombreLibro)">Buscar</button>
        </td>
      </tr>
    </table>
    </br></br>

    <table id="tablaResul">
      <tr ng-repeat="x in names">
        <td>{{ x.autor }}</td>
        <td>{{ x.nombre }}</td>
        <td>{{ x.fecha_publicacion }}</td>
      </tr>
    </table>
  </div>
</form>

Script

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
      $scope.search = function(nombreLibro) {
        $http({
          url: "consulta.php", 
          method: "GET",
          params: {name: nombreLibro}
        }).then(function (response) {$scope.names = response.data.records;});
      }
  });
</script>