Pradeepb Pradeepb - 1 year ago 91
AngularJS Question

values not showing up in select button

I am trying to get options in select button but its not showing up.

my code is as below:


<select ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>


vm.orders = response.orders;
vm.order = vm.orders[0];

Before it was working fine and i was getting values in select options. but then I wanted to use material design from
I have also initialized "select" as per what they told :

$(document).ready(function(){ $('select').material_select();});

Eventhough I am getting values to html page, I am not getting them inside select options. please refer the below code which i can see after inspecting in browser:

<div class="select-wrapper"><input class="select-dropdown" readonly="true"
data-activates="select-options-082235b8-d9be-505d-90ab-c4cc9b9bb765" value=""
type="text"><i class="mdi-navigation-arrow-drop-down"></i>
<select class="selectOptions ng-pristine ng-untouched ng-valid initialized" ng-model="main.order"
ng-options="order as order.title for order in main.orders">
<option selected="selected" label="Year Ascending" value="object:16">Year Ascending</option>
<option label="Year Descending" value="object:17">Year Descending</option>
<option label="Title Ascending" value="object:18">Title Ascending</option>
<option label="Title Ascending" value="object:19">Title Ascending</option>

Please let me know what am I doing wrong. Code is available at github:

Answer Source

I explained how to fix it in this issue.

Basically you need to create a directive for all select elements, it can be bound to the select element, and call $(element).material_select(); in its link function.

Also, since it won't know when the data that came from the server is done, you'll need to prevent the select from being created at all. a ngIf will do the trick. So your select will look like this:

    ng-options="order as order.title for order in main.orders" 

As for the directive, you can use this one. I use this in my code that will soon hit production ;)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download