Question

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

然后在循环中的语句

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

可能还有某种类似的刷新

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

退出循环后。

这可以在没有角度的情况下完成吗？

Answer 1

通过javascript添加项目，例如：

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

Answer 2

@Rafa的回答是正确的，但你似乎使用jQuery而不是普通的JS。 @ Ataru的回答使用jQuery，但缺少ons.Compile（）; ons.compile（）是从onsen指令生成常规HTML（自定义Web Components）所必需的，因为并非所有浏览器都支持它们（还有）。

总结一下：

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

Answer 3

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

谢谢。

enter image description here 您可以使用jQuery添加新列表，如下所示：

Answer 4

对我有用的是：

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

也许你必须为它添加编译，互联网不确定（ - ;

如何在没有角度的情况下动态地将项目添加到onsen-list？

4 个答案: