ng-bind-html和ng-model一起在选择下拉列表中 [英] ng-bind-html and ng-model together in select dropdown
问题描述
嗨朋友们,
我有以下JSON文件
Hi Friends,
I have JSON file as below
var LocationList = [
{"id":1,"value":"ABC"},
{"id":2,"value":"XYZ"},
.
.
.
]
我正在尝试动态填充我的HTML下拉列表如下所示
Angular代码:
I'm trying to dynamically populate dropdown on my HTML as below
Angular Code:
.factory('locationService', function($filter){
var Location = {};
Location.Template = "";
Location.getLocation = function(){
var template = '<option direction="ltr" value="" id="theOption2">' + $filter('translate')('lSummary_Location_text') + '</option>';
LocationList.forEach(function(loc){
var value = loc.value + ' / ID: ' + loc.id;
template += '<option direction="ltr" value="' + value + '">' + loc.value + '</option>';
});
Location.Template = template;
},
Location.getTemplate = function(){
return Location.Template;
}
return Location;
})
.controller('secondInfoCtrl',function($scope, locationService, $sce){
$scope.locationList =$sce.trustAsHtml(locationService.getTemplate());
//RETURNS THE DATA FROM LOCAL STORAGE
$scope.Location = SecondScreenService.getInfo();
})
HTML:
HTML:
<select id="location" ng-model="Location.location" ng-bind-html="locationList"></select>
问题:
当我从下拉列表中选择一个选项并转到下一页并再次返回同一页面,ng-model无效。预期的行为是下拉列表应设置为用户选择的值,但下拉列表显示1选项。
如果我没错,ng-model在ng-bind-html之前运行,所以如果没有填充下拉列表,那么将如何选择该值。 />
有没有办法延迟ng-model,所以列表首先填充,然后绑定发生。
提前致谢
Problem:
When I select an option from dropdown and move to next page and come back again to same page, ng-model is not working. Expected behavior is that the dropdown should be set to the value selected by the user, but the dropdown shows 1 option as selected.
If I'm not wrong, ng-model runs before ng-bind-html, so if the dropdown is not populated how the value will be selected.
Is there any way to delay ng-model, so that the list gets populate first and binding happens after that.
Thanks in advance
推荐答案
filter){
var location = {};
Location.Template =;
Location.getLocation = function(){
var template ='< option direction =ltrvalue =id =theOption2>'+
filter){ var Location = {}; Location.Template = ""; Location.getLocation = function(){ var template = '<option direction="ltr" value="" id="theOption2">' +
filter('translate')('lSummary_Location_text')+'< / option>';
LocationList.forEach(function(loc){
var value = loc.value +'/ ID:'+ loc.id;
template + ='< option direction =ltrvalue ='+ value +'>'+ loc.value +'< / option>';
});
Location.Template = template;
},
Location.getTemplate = function(){
返回Location.Template;
}
返回位置;
})
.controller('secondInfoCtrl',function(
filter('translate')('lSummary_Location_text') + '</option>'; LocationList.forEach(function(loc){ var value = loc.value + ' / ID: ' + loc.id; template += '<option direction="ltr" value="' + value + '">' + loc.value + '</option>'; }); Location.Template = template; }, Location.getTemplate = function(){ return Location.Template; } return Location; }) .controller('secondInfoCtrl',function(
scope,locationService,
scope, locationService,
这篇关于ng-bind-html和ng-model一起在选择下拉列表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!