$scope не определен в сценарии 2
Невозможно извлечь ng-изменить выбранное значение из выпадающего списка.
Я пытаюсь передать выбранное значение из раскрывающегося списка вызову API в сценарии 2, как показано ниже, но не могу этого сделать.
В инструментах разработчика Chrome было показано сообщение об ошибке как "$scope не определен" в сценарии 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 - извлечь выбранное значение и передать его в 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 (не включается предупреждение MSG в сценарии 2).
Может ли какой-либо орган помочь мне в вышеуказанном вопросе.
3 ответа
Используйте приведенный ниже код.
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 });
});