I am currently working on a web service that returns a json file when called with an entry ID parameter. I have successfully created an Angular method to retrieve the data from this service. However, I am facing difficulty in recalling the service when the input ID changes. I want the method to be automatically triggered whenever a new value is provided.
The parameter I pass for the ID is named Reference. The current HTML code displays an object with a reference value of 1234. But if I try to change this value, I struggle to recall the service.
Below is my existing code:
Angular:
var app = angular.module("myModule", [])
.controller("myController", function ($scope, $http) {
var res = $http({
method: 'GET',
url: 'AirPortrWebService.asmx/DashboardDetail',
params: { Reference : '1234' }
})
.then(function (response) {
$scope.booking = response.data
});
$scope.test = "Angular Method Called";
$scope.Reference = '1234';
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular.js"></script>
<script src="app/NewAppTwo.js"></script>
</head>
<body ng-app="myModule" ng-controller="myController">
{{test}}
{{Reference}}
<br />
<br />
<input type="text" ng-model="Reference" ng-change="booking"/>
{{booking}}
</body>
</html>