CODEWITHSUNDEEP
onsen-ui
celerius
celerius

Reputation: 115

How can I dynamically add items to an onsen-list without angular?

<ons-list id="myList"></ons-list>

Then a statement in a loop that does

$('#myList').append("<ons-list-item>" + variableItem + "</ons-list-item>");

And probably some sort of a refresh like so

$('#myList').listview('refresh');

after exiting from the loop.

Can this be done without angular?

Upvotes: 3

Views: 5144

Answers (4)

Remzo
Remzo

Reputation: 103

What worked for me is:

<ons-list id="list4" >
  <ons-list-header>Grocery list</ons-list-header>
  <ons-list-item >Broccoli</ons-list-item>
  <ons-list-item>Oranges</ons-list-item>
</ons-list>

 <script>
var m = "Apples & Pears"
var item = ons._util.createElement("<ons-list-item> </ons-list-item>");
item.innerHTML = m;
document.getElementById("list4").appendChild(item);
  </script>

Maybe you have to add compile to it, the internet is not sure about it (-;

Upvotes: 0

Buyut Joko Rivai
Buyut Joko Rivai

Reputation: 308

@Rafa's answer is correct, but you seemed to use jQuery instead of plain JS. @Ataru's answer utilizes jQuery, but lack ons.Compile(); ons.compile() is required to generate regular HTML from onsen directives (custom Web Components) since not all browser support them (yet).

Here's sum up:

$('#myList').append("<ons-list-item>" + variableItem + "</ons-list-item>"); ons.compile($('#myList')[0]);

Upvotes: 3

Rafa Heringer
Rafa Heringer

Reputation: 320

Add item via javascript, like:

var listElement = document.getElementById('myListElement'); //My ons-list element
var newItemElement = document.createElement('ons-list-item'); //My new item
newItemElement.innerText = 'Lorem ipusm dolor'; //Text or HTML inside

//Update ons render
ons.compile(listElement);

Upvotes: 5

Ataru
Ataru

Reputation: 544

index.html

<!DOCTYPE HTML>
<html ng-app="yourApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- If you don't use Monaca, please comment out here and load Onsen UI directly.  -->
    <script src="components/loader.js"></script>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>

        var yourApp = angular.module('yourApp', ['onsen']);
        yourApp.controller('listCtrl', function($scope, $timeout) {
        
        // Add new list ith jQuery.
        var onsList = $("#ons-list-test");
        onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 1</ons-list-item>');
        onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 2</ons-list-item>');
        onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 3</ons-list-item>');
        onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 4</ons-list-item>');            
        onsList.append('<ons-list-item class="list__item ons-list-item-inner" style="background:#999999;">Item 5</ons-list-item>');
                            
    });
    
    </script>
</head>
<body>
  <ons-navigator title="Navigator" var="myNavigator" page="page1.html">
  </ons-navigator> 
</body>
</html>

page1.html

<ons-page>
  <ons-toolbar>
    <div class="center">Navigator</div>
  </ons-toolbar>

  <div style="text-align: center" ng-controller="listCtrl">
    <ons-list id="ons-list-test">
        
    </ons-list>
  </div>

</ons-page>

Thank you.

enter image description hereYou can add your new list by using jQuery as following:

Upvotes: 0

Related Questions