angularjs - ng-bind-html and ng-model together in select dropdown -
i have json file below
var locationlist = [ {"id":1,"value":"abc"}, {"id":2,"value":"xyz"}, . . . ]
i'm trying dynamically populate dropdown on html 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 data local storage $scope.location = secondscreenservice.getinfo(); })
html:
<select id="location" ng-model="location.location" ng-bind-html="locationlist"></select>
problem: when select option dropdown , move next page , come again same page, ng-model not working. expected behavior dropdown should set value selected user, dropdown shows 1 option selected.
if i'm not wrong, ng-model runs before ng-bind-html, if dropdown not populated how value selected.
is there way delay ng-model, list gets populate first , binding happens after that.
may know i'm going wrong.
thanks in advance
you should read on ng-options, none of html binding needed can this:
controller:
$scope.locationlist = locationlist;
html:
<select id="location" ng-model="location.location" ng-options="location location.value locaiton in locationlist" ></select>
Comments
Post a Comment