Materialize: Selects and angular

[alejandr0pg]

When I try to get the value of a select -angle I can not, because the original select a dropdown in obtaining been thinking the value of a select with any js framework ?

-------------ESPAÑOL-------------
Cuando intento obtener el valor de un select con angular no puedo, ya que el select original es un dropdown, han pensando en como obtener el valor de un select con algun framework js?

[carlosperate]

Actual english: I cannot obtain the value of a select element with Angular when I try, becase the original select is a dropdown (??). Have you considered how to obtain the select value with any js framework?

---

I haven't used any other js framework with materialize, but in js I had no issues adding an onchange event listener to the original select element.

[viniciusmelquiades]

I am using Materialize with Angular and had no problems getting the value from the select.

[im-n1]

I've just tried to get value from materialized select and the value is empty. Basically the issue remains.

[viniciusmelquiades]

We won't get anywhere with this. What version of materialize and angular are you using? I'm using materialize 0.95.2 and angular 1.3.14.

You could also share a code example of how you're doing it. This is an example of how I'm writing it.

{{vm.model.gender}}
<!-- The material_select function is called on a directive I created -->
<select ng-model="vm.model.gender" required="required">
    <option value="">Gender</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

[ibrainventures]

I tried your code and there is no data in the scope ... It only works with the browser-default class , which is a design backstep ... Did you use it without the browser default ? Can you please show or describe your directive ?

[viniciusmelquiades]

In my example, it is as I used in my app, word by word, and it works.
I have another case where the options come from the server and filled with ngOptions, in that case I used a ngIf to prevent the select being created before the data is ready.

<select ng-model="myModelr" required="required" ng-options="..." ng-if="options.$resolved">
    <option value="">Gender</option>    
</select>

The options would be my options, and the $resolved property is there because I'm using ngResource, but you can use whatever way you want to prevent it being created before time.

I also created a directive for the select, because my app is a single page app, so my directive handles calling material_select for each select element.

Remember I'm also using materialize version 0.95.2

[dhawken]

I tried this out in my app and it all works. I didn't name my controller "vm" though, so had to change that, but it works verbatim other than that change with and without the browser-select class as @viniciusmelquiades indicates. I am using jquery passthrough to call the material_select.

[Dogfalo]

I'm going to go ahead and close this as there seems to be no problem. Thank you @viniciusmelquiades for clarifying your method.

[MakkaHareesh]

above in ng-click = before selected option is sending to function so plz alternate

[jamesgarzon]

@viniciusmelquiades, looks like the problem is when you put the select inside.input-field

<div class="input-field col s12">
   {{vm.model.gender}}
   <!-- The material_select function is called on a directive I created -->
   <select ng-model="vm.model.gender" required="required">
       <option value="">Gender</option>
       <option value="Male">Male</option>
       <option value="Female">Female</option>
   </select>
</div>

This code don't work inside that class

[fedpettinella]

Do you think you could post your directive for the select elements that calls material_select?

[nicolaspennesi]

@PerzAlejandro @fedpettinella @jamesgarzon @ibrainventures
Just load jQuery before Angular, and it work like a charm! :)

[VictorSales]

thx @nicolaspennesi

[arunramkrish]

Thanks @viniciusmelquiades Never thought ng-if will make such a difference. It is kind of mandatory to place it your options are loading dynamically by collection in scope from the controller. Fortunately, google helped me to land up here. I will we documented this. I will check that out if we can contribute in terms of documentation

[munchMycode]

@nicolaspennesi your method worked like a charm!!!

[viniciusmelquiades]

@Antonyselt I fixed it for you here https://codepen.io/anon/pen/yoRbrQ

Basically I used ng-options. I never tried with ng-repeat.
The default option ("Choose your option") was fixed by setting the value as an empty string (value="").
You don't need the selected attribute in the default option. Angular will set the default option for you.
I only fixed the first example.