How to make an ajax call after selecting a combo box option in angularJS

Question

How to make an ajax call after selecting a combo box option in angularJS

Navigation

#1 by (0 votes)

2

This is my html.

<div class="pull">
    <select name="ifield06" ng-model="selectCuenta" ng-options="cuentas as cuentas.asociado for cuentas in ListaCuentas track by cuentas.id ">
        <option value="">Cuenta</option>
        <option value="">Cuenta1</option>
        <option value="">Cuenta2</option>
     </select>
 </div>

This is how I get the list in my service:

this.getCuentas = function () {
    return $http.get(UrlCuentas);
};

I consume it in my controler in the following way

$scope.status='';
$scope.selectCuenta =null;
productoServicio.getCuentas().then(function (response) {
    $scope.ListaCuentas  = response.data;
    //$scope.estado = true;     
}, function (error) {
    $scope.status = 'Unable to load customer data: ' +        error.message;
    // $scope.estado = false;     
});

I need to call a JSON (ex: UrlRecibos) when for example I select "account1" this does not know where to do it if in the service or controller of my Angular application.

I had thought to do it with a ng-click but I do not know how to implement the function. Please someone who can help me I'm new to AngularJS.

json angularjs

asked by jose.luis.lopez 16.06.2016 в 21:18

source

1 answer

Primefaces fileUploadListener does not call / executes the function Error convert varchar to int codeigniter sql server

score 0 · Accepted Answer

You can use ng-change

Evaluates the given expression when the user changes the input. The expression is evaluated immediately, unlike the event onchange of Javascript that only triggers at the end of the change (usually when the user leaves the control or press the return key).

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.hazAlgo = function() {
      alert('Valor cambiado');
      // Aqui haces la llamada ajax
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div class="pull">
    <select name="ifield06" ng-model="selectCuenta" ng-change="hazAlgo()">
      <option value="">Cuenta</option>
      <option value="1">Cuenta1</option>
      <option value="2">Cuenta2</option>
    </select>
  </div>
</div>

Or you can also use a $watch

Registers a callback to execute when the expression to observe changes.

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.$watch('selectCuenta', function() {
      alert('Valor cambiado');
      // aqui haces la llamada ajax
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div class="pull">
    <select name="ifield06" ng-model="selectCuenta">
      <option value="">Cuenta</option>
      <option value="1">Cuenta1</option>
      <option value="2">Cuenta2</option>
    </select>
  </div>
</div>

Both will be triggered when the value associated with ng-model changes. Keep in mind that in your example you put all the attributes value of the labels <option> equal to the same value which will cause the value to always be the same and no change is detected.

Instead of

<option value="">Cuenta</option>
<option value="">Cuenta1</option>
<option value="">Cuenta2</option>

should be

<option value="">Cuenta</option>
<option value="1">Cuenta1</option>
<option value="2">Cuenta2</option>

or something similar.

Also note that I removed ng-options of your select since you are specifying the options manually using <option> elements. You can use ng-options without problems but you must choose one of the two ways otherwise all the <option> that you put will be overwritten by ng-options when the DOM is compiled.