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屋！