How to call ajax on onchange dropdown by angularjs? - 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.
Use ng-options to populate hotel list
Use ng-model to bind the selected value to some variable
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.
Defile $scope.hotels with array of hotel id and name.
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