How to call ajax on onchange dropdown by angularjs?

Question

My question is

By deafult I am getting result for 1st hotel, how to get results on onchange of hotels dropdown by using angularjs directives ?

My Code

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='HttpController'>
   {{detail.name}} <br/>
   {{detail.address}} <br/>
   {{detail.country}}<br/>
</div>

<script>
    var hotelid=$('select#hotel_property option:selected').val();

        var data = {};
        data.Hotelid = hotelid;
        data.Action = "hotel_property";

        var helloApp = angular.module("myApp", []);

        helloApp.controller("HttpController", function($scope, $http) {
                $http({
                    method: 'POST',
                    datatype:"json",
                    header: {
                        "contentType": 'application/json'
                    },
                    data: JSON.stringify(data),
                    url: '/ajax',
                }).success(function(data, status, headers, config) {
                    $scope.detail = data.hotel_details;
                }).error(function(data, status, headers, config) {
                    alert( "failure");
                });
        });

    </script>

<select id="hotel_property">
	<option value="111">Taj hotel</option>
	<option value="222">oberoi</option>
	<option value="333">JW marriot</option>
	<option value="444">Grand Maratha</option>
</select>

By deafult I am getting result for 1st hotel, how to get results on onchange of hotels dropdown by using angularjs directives ?

Answer 1

You'll have to do something on these lines.

1. Use ng-options to populate hotel list
2. Use ng-model to bind the selected value to some variable
3. Use ng-change to trigger a function to handle the change.

   <select id="hotel_property" ng-model="selectedHotel" 
        ng-change="fetchInfo(selectedHotel)" 
        ng-options="hotel.name for hotel in hotels">
       <option value="">-- please select -- </option>
   </select>

and your controller might look like this.

1. Defile $scope.hotels with array of hotel id and name.
2. define a function to fetch hotel information.

 helloApp.controller("HttpController", function($scope, $http) {
  $scope.hotels = [{
    id: 111, 
    name:'Taj hotel'
  },{
    id: 222, 
    name:'oberoi'
  },{
    id: 333, 
    name:'JW marriot'
  },{
    id: 444, 
    name:'Grand Maratha'
  }];
  $scope.fetchHotelInfo(hotel){

    var data = {};
    data.Hotelid = hotel.id;
    data.Action = "hotel_property";


    $http({
      method: 'POST',
      datatype:"json",
      header: {
        "contentType": 'application/json'
      },
      data: JSON.stringify(data),
      url: '/ajax',
    }).success(function(data, status, headers, config) {
      $scope.detail = data.hotel_details;
    }).error(function(data, status, headers, config) {
      alert( "failure");
    });

  }
});

(Copy pasting code might not work)

Hope this helps!

Answer 2

You can use ng-model directive to store the selected value in the scope and use ng-change to fire the ajax query with the model value as parameter.

https://docs.angularjs.org/api/ng/directive/select