我无法访问所选选项的值,我认为我在向选择菜单或类似菜单提供 ng-model 时犯了一个错误。
(HTML) 选择选项
<select id="countryListId"></select>
(AngularJS Controller )
$scope.fetchCountries = function() {
var $selectCountry = $('#countryListId');
$.ajax( {
url: 'http://.../someurl/dropdown?typ=Countries',
dataType: 'JSON',
success: function(data) {
$selectCountry.html('<select ng-model="locationForm.country"></select>');
$.each(data, function(key, val) {
$selectCountry.append('<option value="' + val.code + '">' + val.value + '</option>');
})
}, error: function() {
$selectCountry.html('<option id="-1">none available</option>');
}
});
}
代码工作正常,并向我显示了填充的下拉列表,其中包含从网址获取的数据,但是:
when I select an option and try to access the selected value through ng-model: I get null
所以,我希望您指导我通过 Ajax 或其他任何方式提供 ng-model 的正确方法,通过这些方式我可以获得所选的选项。
最佳答案
使用数组(在本例中为$scope.dataselect =[]
)将保留从 API 获取的数据。并将其绑定(bind)到您的模板选项元素,如下所示:
<select ng-model="locationForm.country">
<option ng-repeat="data in dataselect" value="{{data.code}}">{{data.value}}</option>
</select>
在 Controller 上,在成功回调中将数据设置或推送到当前作用域上的数组($scope.dataselect)。如果数据发生变化, View 将自动更新。您不需要手动更新 View 。您还可以使用$http服务。
app.controller('myCtrl', function($scope, $http) {
$scope.fetchCountries = function() {
$scope.dataselect = []; // something [{code:"1",value:"data1"},{code:"2",value:"data2"}]
$http.get("http://.../someurl/dropdown?typ=Countries")
.then(function(data) {
angular.forEach(data, function(val, key) {
var elem = {key:val.code,value:val.value};
$scope.dataselect.push(elem);
})
}, function(response) {
//handles error
$scope.dataselect = [{code:"-1",value:"Not available"}]
});
});
});
var app = angular.module("myApp",[]);
app.controller('MainCtrl', function($scope,$http) {
$scope.dataselect =[];
$scope.update = function() {
console.log("changed "+$scope.locationForm.country);
}
$scope.fetchCountries = function() {
$scope.dataselect =[];
$scope.dataraw ={"code1":"value1","code2":"value2"}; //dummy from API
angular.forEach($scope.dataraw, function(val, key) {
var elem = {key:key,value:val};
$scope.dataselect.push(elem);
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl ">
{{locationForm.country}}
<select ng-change="update()" id="countryListId" ng-model="locationForm.country">
<option ng-repeat="data in dataselect" value="{{data.key}}">{{data.value}}</option>
</select>
<button ng-click="fetchCountries()">Fetch</button>
</div>
解决方案 2:(为了解释起见)
但是,如果您只想使用 jQuery#html函数,那么您应该创建包装元素,如下所示:
<div id="select-container-js">
<select id="countryListId"></select>
</div>
现在您可以使用它了。但在这种情况下,您还需要调用 $compile使用新元素编译 DOM 并将其链接到当前范围。
$('#select-container-js').html('<select id="countryListId" ng-model="locationForm.country"></select>');
//you should set $selectCountry just before using it because of reference losing.
var $selectCountry = $('#countryListId');
$.each(data, function(key, val) {
$selectCountry.append('<option value="' + val.code + '">' + val.value + '</option>');
})
$compile($selectCountry)($scope);
注意:不要忘记将 $compile 服务注入(inject)到您的 Controller 中。
app.controller('MainCtrl', function($scope,$compile) {}
关于javascript - 如何在 AngularJS 中通过 AJAX 添加 ngmodel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48223578/