When dynamically changing the underlying array of a select element, Materialize doesn't update the select wrapper. For this to work, the select needs a refresh.
Since Materialize doesn't provide a native refresh functionality, this is done by destroying and recreating the select wrapper.
This is useful for example when using asynchronous operations (like getting data from web services) so you can initialize the select on view load but populate it when data arrives.
| <template> | |
| <div> | |
| <select md-select md-select.ref="select" value.two-way="selectedMeal"> | |
| <option disabled>Select your meal</option> | |
| <option repeat.for="meal of food" model.bind="meal">${meal.name}</option> | |
| </select> | |
| <a md-button="flat: true;" md-waves click.trigger="addFood()" class="accent-text">add some food</a> | |
| You selected: ${selectedMeal | stringify} | |
| </div> | |
| </template> |
| export class App { | |
| food = [ | |
| { id: 0, name: 'Pizza' }, | |
| { id: 1, name: 'Cake' }, | |
| { id: 2, name: 'Steak' }, | |
| { id: 3, name: 'Pasta' }, | |
| { id: 4, name: 'Fries' } | |
| ]; | |
| selectedMeal = null; | |
| addFood() { | |
| ['Water', 'Apples', 'Oranges', 'Fish'].forEach(f => { | |
| this.food.push({ id: this.food.length, name: f }); | |
| }); | |
| this.select.refresh(); | |
| } | |
| } | |
| export class StringifyValueConverter { | |
| toView(value) { | |
| return JSON.stringify(value); | |
| } | |
| } |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |