没有父容器的ng-repeat

时间:2014-01-18 00:25:50

标签: javascript jquery jquery-ui angularjs

我正在使用Jquery Accordion http://jqueryui.com/accordion/

预期的标记如下。由于h3在任何父容器之外,我如何使用ng-repeat重复此结构?我试过用div包装但是打破了手风琴的功能

<div id="accordion">

  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>

  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
  </div>
</div>

1 个答案:

答案 0 :(得分:8)

您可以显式声明转发器的起点和终点,而不是将项封装在包装器中。尝试:

<div id="accordion">
    <h3 ng-repeat-start="item in accordionItems">
        {{item.title}}
    </h3>
    <div ng-repeat-end>
        <p>{{item.text}}</p>
    </div>
</div>