在 onsen.ui 中为轮播动态创建项目 ons-list-item

Question

我需要像示例 http://codepen.io/onsen/pen/emmKpV 一样创建旋转木马温泉，我正在尝试动态创建项目 ons-list-item 但我的代码在动态插入新的 ons-list-item 时不起作用在ons-list中添加html代码，新的ons-list-item不显示，我的代码如下：

这是我的 html 代码。

<ons-page>
    <ons-toolbar>
        <div class="center">Simple ng-repeat list</div>
    </ons-toolbar>
    <ons-list id='contenedor'></ons-list>
    <input type='button' value="item" onclick='crearItem()' />
 </ons-page>

这是我的 javascript 代码。

function crearItem(){
    htmlText = "<ons-list-item class='list-item'><ons-carousel swipeable class='item-container' initial-index='1' auto-scroll><ons-carousel-item class='list-action-menu' >Borrar</ons-carousel-item><ons-carousel-item class='list-action-item'>title</ons-carousel-item></ons-carousel></ons-list-item>";  
    document.getElementById('contenedor').innerHTML = htmlText;
}

这是我的完整代码 http://codepen.io/anon/pen/PPNRzX

非常感谢任何可以帮助我的人

Answer 1

不推荐你的做法，不需要直接加上HTML。相反，您可以这样做：

<ons-carousel var="carousel" auto-refresh swipeable overscrollable style="height: 50%; width: 100%;" item-width="40%">
  <ons-carousel-item ng-repeat="item in items" ng-attr-style="background-color: {{ item }}">
    {{ item }}   
  </ons-carousel-item>
</ons-carousel>

通过使用 ng-repeat="item in items"，您可以为所有元素重复 items 内容。您可以在控制器中定义 items 的内容。

这里是CopePen example如何制作动态轮播内容，希望对你有所帮助！

Answer 2

如果您动态添加内容，则需要使用 ons.compile() 函数对其进行编译。

在您的情况下，它看起来像这样：

function crearItem(){
  htmlText = "<ons-list-item class='list-item'><ons-carousel swipeable class='item-container' initial-index='1' auto-scroll><ons-carousel-item class='list-action-menu' >Borrar</ons-carousel-item><ons-carousel-item class='list-action-item'>title</ons-carousel-item></ons-carousel></ons-list-item>";  
  var el = document.getElementById('contenedor');
  el.innerHTML = htmlText;
  ons.compile(el);
}

在 onsen.ui 中为轮播动态创建项目 ons-list-item

dynamically create items ons-list-item for a carousel in onsen.ui

jquery

android

listitem

carousel

onsen-ui