android - 在 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 内容。您可以在 Controller 中定义 items 的内容。

这是一个CopePen example关于如何创建动态轮播内容，希望对您有所帮助!