How do I initialize <select> using MaterializeCSS and AngularJS combined?

Question

I've been trying to add a simple < select > snippet to my page, but as I discovered in this answer, MaterializeCSS starts off by disabling it, and then re-enables (I'm assuming) once the correct jQuery plugin has been loaded (using directives, as shown by this answer)

I have not been able to find a good example on how to do this using AngularJS, and I would like to avoid moving to an angular-designed fork of Materialize if possible.

Here's what I got.

<label>
    test
    <select material-select>
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </select>
</label>

I am planning to make a directive that initializes the < select >, then I'll use ng-repeat to populate it afterwards.

navApp.directive('myDropDown', function() {
    return {
        //This code is broken, I am not quite sure what I'm doing.
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'select'.material_select();
        }
    };
});

I consider myself a novice at ASP.NET MVC, Entity Frameworks (using MySQL) and AngularJS, which are all the frameworks I'm currently using.

I also found this resource on creating directives, but I am not sure how to adapt it to my situation.

I'd be deeply grateful for any help on this.

If you're using Angular, you should consider the official Angular Material. Instead of jQuery plugins, it uses native directives. — jme11
– jme11, Commented Jun 18, 2015 at 13:12
@jme11 Thanks for the recommendation. Although Angular Material seems vastly incomplete, since I have no deadline I will start using it instead. If you had made an answer I would have marked it, but I'll give it to Michael for now. — William S
– William S, Commented Jun 24, 2015 at 6:40
@Michael's answer is correct and on point given your question, so I think it should have been the selected answer. That said, I'm glad that you found my recommendation to look at a native approach helpful as well. Best of luck. — jme11
– jme11, Commented Jun 24, 2015 at 9:57
Possible duplicate of MaterializeCSS multiple select not working — William S
– William S, Commented Nov 19, 2015 at 3:14

Michael · Accepted Answer · 2015-06-18 13:15:19Z

0

$(element).'select'.material_select();

What should be the result of this statement? The .'select' is no JS syntax.

try:

$(element).material_select(); // if the element is already the select element

or:

$(element).find('select').material_select(); // find a child select of the element

answered Jun 18, 2015 at 13:15

Michael

3,1141 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

William S Over a year ago

I decided to go with Angular Material (ng-material). Thank you for posting this though!

Collectives™ on Stack Overflow

How do I initialize <select> using MaterializeCSS and AngularJS combined?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related