blocks|key|453341|text|AngularJS开发者@igor-minar用Angular.js+ng-repeat+across+multiple+elements回答了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|453342|通过ng-repeat-start和ng-repeat-end，Miško+Hevery最近实现了适当的支持。此增强功能尚未发布到1.0.7+(稳定)和1.1.5+(不稳定)。|style|CODE|453343|更新|453344|这在1.2.0rc1中可用。看看John+Lindquist写的official+docs和this+screencast吧。|453345|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16900050/angular-js-ng-repeat-across-multiple-elements|1|http://docs.angularjs.org/api/ng.directive:ngRepeat|2|http://youtu.be/WX03ODuzkSY^0|O|19|0|0|2|F|I|D|0|0|W|D|1|1A|F|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@$A|12|B|13|F|G]|$A|14|B|15|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]|$A|1B|B|1C|1|1D]]|C|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]]]

<p>AngularJS developer @igor-minar answered this in <a href="https://stackoverflow.com/questions/16900050/angular-js-ng-repeat-across-multiple-elements">Angular.js ng-repeat across multiple elements</a>.</p>
<p>Miško Hevery recently implemented proper support via <code>ng-repeat-start</code> and <code>ng-repeat-end</code>. This enhancement hasn't been released as of 1.0.7 (stable) and 1.1.5 (unstable).</p>
<h3>Update</h3>
<p>This is now available in 1.2.0rc1. Check out the <a href="http://docs.angularjs.org/api/ng.directive:ngRepeat" rel="noreferrer">official docs</a> and <a href="http://youtu.be/WX03ODuzkSY" rel="noreferrer">this screencast</a> by John Lindquist.</p>


blocks|key|453390|text|拥有多个元素可能是有效的，但如果你试图构建一个具有固定页眉/页脚的可滚动网格，下面的方法可能不会起作用。这段代码假设CSS、jquery和AngularJS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|453391|HTML|453392|<table+id="tablegrid_ko">
++++++++<thead>
++++++++++++<tr>
++++++++++++++++<th>
+++++++++++++++++++Product+Title
++++++++++++++++</th>
++++++++++++++++<th>
++++++++++++++++</th>
++++++++++++</tr>
++++++++</thead>

++++++++<tbody+ng-repeat="item+in+itemList">
++++++++++++<tr+ng-repeat="itemUnit+in+item.itemUnit">
++++++++++++++++<td>{{itemUnit.Name}}</td>
++++++++++++</tr>
++++++++</tbody>
</table>|code-block|syntax|javascript|453393|CSS为可滚动表格网格构建固定页眉/页脚|453394|#tablegrid_ko+{
++++max-height:+450px;++++
}
#tablegrid_ko
{
border-width:+0+0+1px+1px;
border-spacing:+0;
border-collapse:+collapse;
border-style:+solid;
}

#tablegrid_ko+td,+#tablegrid_ko+th
{
margin:+0;
padding:+4px;
border-width:+1px+1px+0+0;
border-style:+solid;
}


#tablegrid_ko{border-collapse:separate}
#tablegrid_ko+tfoot,#tablegrid_ko+thead{z-index:1}
#tablegrid_ko+tbody{z-index:0}
#tablegrid_ko+tr{height:20px}
#tablegrid_ko+tr+>td,#tablegrid_ko+tr+>th{
border-width:1px;border-style:outset;height:20px;
max-height:20px;xwidth:45px;xmin-width:45px;xmax-width:45px;white-space:nowrap;overflow:hidden;padding:3px}

#tablegrid_ko+tr+>th{
background-color:#999;border-color:#2c85b1+#18475f+#18475f+#2c85b1;color:#fff;font-weight:bold}
#tablegrid_ko+tr+>td{background-color:#fff}
#tablegrid_ko+tr:nth-child(odd)>td{background-color:#f3f3f3;border-color:#fff+#e6e6e6+#e6e6e6+#fff}
#tablegrid_ko+tr:nth-child(even)>td{background-color:#ddd;border-color:#eaeaea+#d0d0d0+#d0d0d0+#eaeaea}

div.scrollable-table-wrapper{
background:#268;border:1px+solid+#268;
display:inline-block;height:285px;min-height:285px;
max-height:285px;width:550px;position:relative;overflow:hidden;padding:26px+0}

div.scrollable-table-wrapper+table{position:static}
div.scrollable-table-wrapper+tfoot,div.scrollable-table-wrapper+thead{position:absolute}
div.scrollable-table-wrapper+thead{left:0;top:0}
div.scrollable-table-wrapper+tfoot{left:0;bottom:0}
div.scrollable-table-wrapper+tbody{display:block;position:relative;overflow-y:scroll;height:283px;width:550px}|453395|Jquery来绑定tbody的水平滚动，这不起作用，因为tbody在ng-repeat期间重复。|453396|$(function+($)+{

$.fn.tablegrid+=+function+()+{


++++++++var+$table+=+$(this);
++++++++var+$thead+=+$table.find('thead');
++++++++var+$tbody+=+$table.find('tbody');
++++++++var+$tfoot+=+$table.find('tfoot');

++++++++$table.wrap("<div+class='scrollable-table-wrapper'></div>");

++++++++$tbody.bind('scroll',+function+(ev)+{
++++++++++++var+$css+=+{+'left':+-ev.target.scrollLeft+};
++++++++++++$thead.css($css);
++++++++++++//$tfoot.css($css);
++++++++});


++++};+//+plugin+function



}(jQuery));|453397|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Having multiple  elements might be valid but if you're trying to build a scrollable grid with fixed header / footers, the follow could will not work. This code assumes the following CSS, jquery and AngularJS.</p>

<p>HTML</p>

<pre><code>&lt;table id="tablegrid_ko"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;
                   Product Title
                &lt;/th&gt;
                &lt;th&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;

        &lt;tbody ng-repeat="item in itemList"&gt;
            &lt;tr ng-repeat="itemUnit in item.itemUnit"&gt;
                &lt;td&gt;{{itemUnit.Name}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>CSS to build fixed header/footer for scrollable table grid</p>

<pre><code>#tablegrid_ko {
    max-height: 450px;    
}
#tablegrid_ko
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
}

#tablegrid_ko td, #tablegrid_ko th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
}


#tablegrid_ko{border-collapse:separate}
#tablegrid_ko tfoot,#tablegrid_ko thead{z-index:1}
#tablegrid_ko tbody{z-index:0}
#tablegrid_ko tr{height:20px}
#tablegrid_ko tr &gt;td,#tablegrid_ko tr &gt;th{
border-width:1px;border-style:outset;height:20px;
max-height:20px;xwidth:45px;xmin-width:45px;xmax-width:45px;white-space:nowrap;overflow:hidden;padding:3px}

#tablegrid_ko tr &gt;th{
background-color:#999;border-color:#2c85b1 #18475f #18475f #2c85b1;color:#fff;font-weight:bold}
#tablegrid_ko tr &gt;td{background-color:#fff}
#tablegrid_ko tr:nth-child(odd)&gt;td{background-color:#f3f3f3;border-color:#fff #e6e6e6 #e6e6e6 #fff}
#tablegrid_ko tr:nth-child(even)&gt;td{background-color:#ddd;border-color:#eaeaea #d0d0d0 #d0d0d0 #eaeaea}

div.scrollable-table-wrapper{
background:#268;border:1px solid #268;
display:inline-block;height:285px;min-height:285px;
max-height:285px;width:550px;position:relative;overflow:hidden;padding:26px 0}

div.scrollable-table-wrapper table{position:static}
div.scrollable-table-wrapper tfoot,div.scrollable-table-wrapper thead{position:absolute}
div.scrollable-table-wrapper thead{left:0;top:0}
div.scrollable-table-wrapper tfoot{left:0;bottom:0}
div.scrollable-table-wrapper tbody{display:block;position:relative;overflow-y:scroll;height:283px;width:550px}
</code></pre>

<p>Jquery to bind horizontal scrolling of tbody, this does not work because tbody repeats during ng-repeat.</p>

<pre><code>$(function ($) {

$.fn.tablegrid = function () {


        var $table = $(this);
        var $thead = $table.find('thead');
        var $tbody = $table.find('tbody');
        var $tfoot = $table.find('tfoot');

        $table.wrap("&lt;div class='scrollable-table-wrapper'&gt;&lt;/div&gt;");

        $tbody.bind('scroll', function (ev) {
            var $css = { 'left': -ev.target.scrollLeft };
            $thead.css($css);
            //$tfoot.css($css);
        });


    }; // plugin function



}(jQuery));
</code></pre>


blocks|key|235691|text|您可以这样做，正如我在下面的回答中所展示的：https://stackoverflow.com/a/26420732/769900|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|235692|<tr+ng-repeat="m+in+myData">
+++<td>{{m.Name}}</td>
+++<td>{{m.LastName}}</td>

+++<td+ng-if="$first"+rowspan="{{myData.length}}">
+++++++<ul>
+++++++++++<li+ng-repeat="d+in+days">
+++++++++++++++{{d.hours}}
+++++++++++</li>
+++++++</ul>
+++</td>+
</tr>|code-block|syntax|javascript|235693|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/26420732/769900^0|M|17|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can do it in this way, as I showed in this answer: <a href="https://stackoverflow.com/a/26420732/769900">https://stackoverflow.com/a/26420732/769900</a></p>

<pre><code>&lt;tr ng-repeat="m in myData"&gt;
   &lt;td&gt;{{m.Name}}&lt;/td&gt;
   &lt;td&gt;{{m.LastName}}&lt;/td&gt;

   &lt;td ng-if="$first" rowspan="{{myData.length}}"&gt;
       &lt;ul&gt;
           &lt;li ng-repeat="d in days"&gt;
               {{d.hours}}
           &lt;/li&gt;
       &lt;/ul&gt;
   &lt;/td&gt; 
&lt;/tr&gt;
</code></pre>


<p>I am using Angular.js for an application that uses hidden trs to simulate a sliding out effect by showing the tr and sliding down the div in the td below. This process worked fantastically using knockout.js when iterating over an array of these rows, because I could use <code>&lt;!-- ko:foreach --&gt;</code> around both tr elements.</p>

<p>With angular, <code>ng-repeat</code> must be applied to an html element, meaning I cannot seem to repeat these double rows using standard methods. My first response to this was to create a directive to represent these double trs, but that fell short because directive templates must have a single root element, but I have two (<code>&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;/tr&gt;</code>).</p>

<p>If anyone with experience with ng-repeat and angular who has cracked this can explain how to solve this problem, I would be greatly appreciative.</p>

<p>(I should also note that attaching <code>ng-repeat</code> to the tbody is an option, but this produces multiple tbodys, and I am assuming that is bad form for standard HTML, although correct me if I'm wrong)</p>


Angular.js ng-repeat across multiple tr's

jQuery

我使用Angular.js开发了一个应用程序，它使用隐藏的trs来模拟滑出效果，方法是在下面的td中显示tr并向下滑动div。在迭代这些行的数组时，使用knockout.js可以很好地完成这个过程，因为我可以对两个tr元素使用。对于angular，ng-repeat必须应用于htm...

问Angular.js ng-跨多个tr重复
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular.js ng-跨多个tr重复EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular.js ng-跨多个tr重复
EN