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

Log in to reply