javascript - ng-model gets defaulted correctly, but select won't show the text, shows blank instead -


so, i'm trying read list of options server, , supply tag, first option default - important thing - i've got model being set correctly, in select shows blank!, , have no idea why that!

i've tried lot of soulations, here, here, , here.

view:-

<select ng-options="option option.name option in options track option.id" ng-model="selected">

controller:-

dataservice.getoptionsfromserver().then(function (result) {     //console.log(result.data);     $scope.options = result.data;     $scope.selected = $scope.options[0];     console.log($scope.selected); }, function (err) {     console.error(err); });

the

console.log($scope.selected);

shows selected being set correctly! help?

update1: seems problems compatibility between angular , jquery-mobile (not added me :@), knows that?

update2: when removing jquery.mobile.min.js, works fine. unfortunately, need throw out project.

update3: problem jqm produce span display value selected, , that's problem!, i've binded select, not span. problem can't bind span till now, 'cuase jqm generate span in runtime :( , that's why when commenting out jqm js works fine.

updated4: solved :d, solution given below future reference.

the problem jqm doesn't display selected value itself, instead gets selected value, , put span in run time, , hides select completely, trust me, took me > 12 hours learn hard way!

so in order jqm re-get selected value select , send displaying span, have call:

jquery("#selectid").selectmenu("refresh", true);

notice in case you're using angular me, it's better use "jquery" not "$" avoid conflict between angular , jquery.

don't take 1 line solation lightly :d, cost more working day :d, hope helpful :d .

importent ref: here.

also note: can make angular directive if intend use select more once :d .


Comments

Post a Comment

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

actually have store importing products store product data insert , update image or image url not insert , update. this xml code name datapro.txt. <products_joined> <productcode>3710_012t</productcode> <vendor_partno>eah5450silent/di/1gd3(lp)</vendor_partno> <productname>test product ta</productname> <hideproduct>n</hideproduct> <stockstatus>20</stockstatus> <lastmodified>1/5/2016 10:25:00 am</lastmodified> <lastmodby>2</lastmodby> <productweight>0.9</productweight> <productprice>100</productprice> <productmanufacturer>asus tek</productmanufacturer> <vendor_price>32.69</vendor_price> <numproductssharingstock>0</numproductssharingstock> <categoryids>107</categoryids> <producturl>http://tebkq.mvlce.servertrust.com/productdetails.asp?productcode=3710_012t</producturl>
Read more

javascript - jQuery UI Splitter/Resizable for unlimited amount of columns -

using jqueryui splitter or resizable functions want create layout allows unlimited amount of columns added , columns need resizable. so fiddle: https://jsfiddle.net/f3glh3mw/ but in fiddle html contains out of nested sets instead of inline. limits possibilities above fiddle can have equal widths 2,4,8,16,32 etc columns. in between shows crooked can see in fiddle. when researching came on question: jquery ui , splitter if @ top answer shows structure like: <div class="wrap"> <div class="resizable resizable1"></div> <div class="resizable resizable2"></div> </div> full fiddle: http://jsfiddle.net/8qztj/86/ which structure want javascript hardcoded 2 resizable items. so here question: how modify last fiddle works amount of .resizable divs. or know of plugin can this. thanks helping! so far found plugin: http://www.bacubacu.com/colresizable/ which says , close functionality want. in
Read more

javascript - IE9 error '$'is not defined -

Image
<!--[if lte ie 9]><html class="lte9"><![endif]--><!--[if gt ie 9]><html><![endif]--> <!--[if !ie]><!--> <html> <!--<![endif]--> blah blah <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ asset('js/mypage.js') }}" type="text/javascript"></script> </body> </html> when load page, ie9 brings error '$' not defined . how can solve error? +++ mypage.js $(function(){ //when load page, //ie9 tag not moving. $(window).load(function() { $('div.mask').hide(); }); // when click , willshow show. //for not ie 9 if (!$('html').hasclass('lte9')) { var = $('ul.about > li > span.activebtn');
Read more