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

Question

So, I'm trying to read a list of options from the server, and supply it to tag, with the first option as default - which is really important thing to do - but all I've got is the model is being set correctly, but in the select it shows blank!, and I have no idea why is that!

I've tried a lot of SO soulations, here, here, and here.

view:-

<select ng-options="option as option.Name for option in options track by 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 that the selected is being set correctly! any help?

Update1: Seems the problems is compatibility between angular and jquery-mobile (not added by me :@), anybody knows something about that?

Update2: when removing jquery.mobile.min.js, it works fine. unfortunately, I need it throw out the project.

Update3: the problem is that JQM produce a span to display the value selected, and that's the problem!, I've binded the select, not the span. the problem is that I can't bind the span till now, 'cuase JQM generate the span in the runtime :( , that's why when commenting out the JQM js it works fine.

Updated4: solved :D, solution given below for future reference.

I recreated a fiddle and it works perfectly fine: http://jsfiddle.net/Lvc0u55v/11726/ — Matheno, Nov 08 '16 at 10:59
Seems to work fine, also when loading the options asynchronously: https://jsfiddle.net/t2g15fjy/ — devqon, Nov 08 '16 at 11:00
@Matheno I've seen the fiddles, but it won't work into my project, do you think it might be related to the project being Cordova project?! — Boda, Nov 08 '16 at 11:15
@devqon I've seen the fiddles, but it won't work into my project, do you think it might be related to the project being Cordova project?! — Boda, Nov 08 '16 at 11:16
@TudorGrigoriu I don't get what you are saying, can you explain a bit more :) ? — Boda, Nov 08 '16 at 11:17
This was created in Angular 1.4. Notice that I did delete the 'track by option.ID' — Matheno, Nov 08 '16 at 12:14
I'm using AngularJS v1.4.7, and removed that part too, still nothing. — Boda, Nov 08 '16 at 12:44

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

the problem is that JQM doesn't display the selected value itself, instead it gets the selected value, and put into a span in run time, and then hides the select completely, trust me, it took me > 12 hours to learn it the hard way!

so in order for JQM to re-get the selected value from the select and send it to displaying span, you have to call:

jQuery("#SelectId").selectmenu("refresh", true);

notice that in case you're using angular like me, it's better to use "jQuery" not "$" to avoid conflict between angular and jQuery.

don't take that one line solation lightly :D, it cost more than a working day to get it :D, hope it would be helpful :D .

importent ref: here.

also note: you can make an angular directive if you intend to use the select more than once :D .

score 0 · Answer 2 · answered Nov 08 '16 at 11:15

0

Maybe you are not getting any data from the server ,can you check that?

answered Nov 08 '16 at 11:15

GraveyardQueen

771
1
7
17

not true, as can see the in the code //console.log(result.data); I've tested the data. – Boda Nov 08 '16 at 11:19
Can you maybe change the name of the $scope variable from $scope.options to $scope.items and change the corresponding code in the select tag? – GraveyardQueen Nov 08 '16 at 13:41

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

2 Answers2