我正在尝试将选定的值从下拉列表中传递给脚本2中的API调用，如下所示，但无法执行此操作。
在chrome开发人员工具中，它在脚本2中显示错误消息“$ scope is not defined”（$ scope.changed Value = 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);
});
});
//脚本：2 - 获取所选值并将其传递给API以获取数据。
// 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>
看起来它没有进入脚本2本身（没有点击脚本2中的警报消息）。
任何机构都可以帮我解决上述问题。
使用以下代码。
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);
});
}
});
结束括号是个问题。希望它会奏效。
这里的问题是你在两个地方有flv值似乎是冲突的ng-model="flv"和flv ng-options。
<select ng-model="flv" ng-options="flv.FLAVOR_ID for flv in flavours" ng-change="changedValue(flv)">
<option value="">Select Flavor</option>
</select>
在flv将flavor更改为ng-options应解决问题
ng-options="flavor.FLAVOR_ID for flavor in flavours"
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 });
});