I'm trying to pass the selected value from the dropdown to API call in script 2 as below, but unable to do so.
In the chrome developer tools it was showing error msg as "$scope is not defined" in the script 2( $scope.changedValue = function ()).
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script>
var IM_Mod_app = angular.module('IM_ng_app', []);
// script 1: To fetch all flrs from API call. - working as expected. IM_Mod_app.controller("IM_Ctrl", function ($scope, $http) {
$http({
method: 'GET',
url: 'http://localhost:55762/api/ItemMaintenance/GetAllFlavors',
params: { Id: 'US06' }
}).then(function successCallback(response) {
// alert(response.data);
$scope.flavours = response.data;
}, function errorCallback(response) {
// alert(response);
});
});
// Script : 2 - to fetch the selected value and to pass it to API to get data.
// IM_Mod_app.controller("IM_Ctrl", function ($scope) {
$scope.changedValue = function () {
alert("h1111i");
$scope.selectedvalues = $scope.flv.FLAVOR_ID;
}.then(function successCallback(response) {
// success on on change event - call api to get data
alert("hi");
$http({
method: 'GET',
url: 'http://localhost:55762/api/ItemMaintenance/GetAllFlavors',
params: { Id: 'US15' }
}).then(function successCallback(response) {
// scuucess on fetching data from api call
// alert(response.data);
$scope.flavours = response.data;
}, function errorCallback(response) {
// error on fetching data from api call
// alert(response);
});
$scope.flavours = response.data;
}, function errorCallback(response) {
// error on onchange event
});
// });
</script>
</head>
<body ng-app="IM_ng_app">
<div ng-controller="IM_Ctrl">
<select ng-model="flv"
ng-options="flv.FLAVOR_ID for flv in flavours"
ng-change="changedValue(flv)">
<option value="">Select Flavor</option>
</select>
<h1>{{flv.FLAVOR_ID}}</h1>
</div>
</body>
</html>
Looks like it was not entering the script 2 itself(Not hitting the alert msg in script 2).
Can any body can help me in the above issue.
Use the below code.
IM_Mod_app.controller("IM_Ctrl", function ($scope, $http) {
$http({
method: 'GET',
url: 'http://localhost:55762/api/ItemMaintenance/GetAllFlavors',
params: { Id: 'US06' }
}).then(function successCallback(response) {
// alert(response.data);
$scope.flavours = response.data;
}, function errorCallback(response) {
// alert(response);
});
$scope.changedValue = function () {
// alert("hgjhhg");
alert($scope.flv.FLAVOR_ID);
// success on on change event - call api to get data
$http({
method: 'GET',
url: 'http://localhost:55762/api/ItemMaintenance/GetAllFlavors',
params: { Id: 'US15' }
}).then(function successCallback(response) {
alert(response.data);
$scope.flavours = response.data;
}, function errorCallback(response) {
// alert(response);
});
}
});
Closing parentheses is the issue. Hope it will work.