Angular-materialize

This is a collection of simple angular directives for using the features in materializecss.

Input-field

Materialize uses the class .input-field to manage animating labels and input-fields. But that doesn't work properly when angular dynamically creates element

Instead of adding the class input-field, use the input-field directive. This way it still works when angular dynamically creates it.

Toggle input 

<div input-field>
    <input type="text" ng-model="dummyInputs.inputFieldInput">
    <label>Input label</label>
</div>

You can also use it as an element instead of an attribute.


<input-field>
    <input type="text" ng-model="dummyInputs.inputFieldInput">
    <label>Input label</label>
</input-field>

Material select

Add the material-select as an attribute to the select where you want material-select.

Not needed if you add the class browser-default.

It doesn't support changing content within the select, add the class browser-default if you want that.

You selected: {{select.value1}}

<select class="" ng-model="select.value1" material-select>
    <option ng-repeat="value in select.choices">{{value}}</option>
</select>
Using class browser-default
You selected: {{select.value2}}

<select class="browser-default" ng-model="select.value2">
    <option ng-repeat="value in select.choices">{{value}}</option>
</select>

Toasts

Materializes toast is a global function. Using this directive you can call a toast using a custom event (in the below click), and show a message determined by a variable in the scope.

Toast! 

<div class="row">
    <div class="col s4" input-field>
        <input id="message" type="text" ng-model="dummyInputs.message">
        <label for="message">Message</label>
    </div>
    <div class="input-field col s4">
        <a class="waves-effect waves-light btn" data-message="{{ dummyInputs.message }}" toast='click'>Toast!</a>
    </div>
</div>
This is a dropdown 

<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='javascript:void(0);' data-activates='demoDropdown' dropdown data-hover="true">
    This is a dropdown
</a>

<!-- Dropdown Structure -->
<ul id='demoDropdown' class='dropdown-content'>
    <li><a href="javascript:void(0);">Link 1</a></li>
    <li><a href="javascript:void(0);">Link 2</a></li>
    <li><a href="javascript:void(0);">Link 3</a></li>
    <li><a href="javascript:void(0);">Link 4</a></li>
    <li><a href="javascript:void(0);">Link 5</a></li>
</ul>

Sidenav

Make sure to have a side-menu with id corresponding to the argument data-activates.

If you copy this page, there is another side-nav link in the top of the page, which initializes first and therefore sets the options.

If you add the class button-collapse the button will only show when the side-menu is hidden.
This is not done on the below button, for demonstration purposes, although it is added in the code example.

Show side-nav 

<a href="#" class="button-collapse" data-activates="nav-mobile" data-sidenav="left" data-menuwidth="500" data-closeonclick="false">
    Show side-nav
</a>