Dynamic list dialog
-
Is there any way to create dynamic dialog with list, no buttons and callback when list-item has being click to return key and values ?
I’ve personally tried to create a function to create a dynamic list dialog (with jquery and no angular).
When the user click on the list item, the selectItem() function will be triggered.
But I wanted to have a reusable showList function so that I can assign different callback function under different situation. Is there any way to assign a callback for item clicked and also remove the dialog ?function showList(options) { title = getProperty(options, 'title'); value = getProperty(options, 'value'); var list = $('<ons-list onclick="selectItem()"></ons-list>'); $.each(options.list, function (key, value) { var item = $('<ons-list-item modifier="tappable"></ons-list-item>').attr('data-value', key).text(value); list.append(item); }); html = list[0].outerHTML.toString(); ons.notification.confirm({ id: 'listDialog', messageHTML: html, buttonLabels: [], title: title }); }
function selectItem() { var $target = $(event.target); var $sel = $target.closest('.list__item'); value = $sel.attr('data-value'); text = $sel.children('.list__item__center').text(); alert(value); $('#listDialog').remove(); }