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。相反，你可以做这样的事情：

＆＃13;

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

＆＃13;

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

2 个答案: