Dynamic list dialog

Francis Thong

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();
}