如何動態地將項目添加到沒有角度的onsen-list？

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

然後在一個循環，它如何動態地將項目添加到沒有角度的onsen-list？

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

而且可能是某種刷新的，像這樣

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

從環退出後的聲明。

這可以做到沒有棱角？

來源

2014-10-07 celerius

的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>

謝謝。

來源

2014-10-09 08:14:27 Ataru

通過JavaScript添加的項目，如：

enter image description here 您可以通過使用jQuery如下添加新的列表

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

來源

2014-10-15 00:15:46

@拉法的答案是正確的，但你好像使用jQuery而非純JS。 @ Ataru的答案利用jQuery，但缺乏ons.Compile（）;需要ons.compile（）需要ons.compile（）從onsen指令（自定義Web Components）生成常規HTML，因爲並非所有的瀏覽器都支持它們。

這裏我們總結一下：

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

來源

2015-11-06 03:02:51

什麼工作對我來說是：

<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>

也許你需要添加編譯它，互聯網是不知道它（ - ;

來源

2016-08-10 06:47:05 Remzo

如何動態地將項目添加到沒有角度的onsen-list？

回答

相關問題