无法从下拉列表中获取ng-change所选值。
我正在尝试将下拉列表中的选定值传递给脚本 2 中的 API 调用，如下所示，但无法这样做。
在 chrome 开发人员工具中，它在脚本 2( $scope.changedValue = 函数 ())中将错误消息显示为"未定义$scope"。
<!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"和flvng-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的值更改为flavorng-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 });
});