Angular.js birden fazla tr'de ng-tekrarı

Tr'yi göstererek ve aşağıdaki td'de div'i aşağı kaydırarak dışa kayma efektini simüle etmek için gizli trs kullanan bir uygulama için Angular.js kullanıyorum. Bu işlem, bu satırlardan oluşan bir dizi üzerinde yineleme yaparken knockout.js kullanarak harika bir şekilde çalıştı, çünkü <!-- ko:foreach -->her iki tr öğesinin etrafında da kullanabilirdim .

Açısal ile, ng-repeatbir html öğesine uygulanmalıdır, yani standart yöntemleri kullanarak bu çift satırları tekrarlayamıyorum. Buna ilk cevabım, bu çift tr'leri temsil edecek bir yönerge oluşturmak oldu, ancak bu, yönerge şablonlarının tek bir kök öğeye sahip olması gerektiğinden, ancak bende iki ( <tr></tr><tr></tr>) var.

Bu sorunu çözen, ng-tekrar ve açısal deneyimi olan biri, bu sorunun nasıl çözüleceğini açıklayabilirse, çok minnettar olurum.

(Ayrıca ng-repeat, tbody'ye bağlanmanın bir seçenek olduğunu da not etmeliyim , ancak bu birden fazla tbody üretir ve bunun standart HTML için kötü bir biçim olduğunu varsayıyorum, ancak yanılıyorsam beni düzeltin)

Kullanımı ng-repeatile ilgili tbodygöründüğünü geçerli bkz olmaya Bu yayını .

Ayrıca bir html doğrulayıcısı aracılığıyla yapılan hızlı bir test tbody, aynı tabloda birden çok öğeye izin verdi .

Güncelleme: En az Angular 1.2'den itibaren bir dizi öğenin tekrarlanmasına izin veren bir ng-repeat-startve var ng-repeat-end. Daha fazla bilgi için belgelere bakın ve yorum için @Onite'a teşekkürler!

AngularJS geliştiricisi @ igor-minar, bunu Angular.js'de ng-yinelemede birden çok öğede yanıtladı .

Miško Hevery kısa süre önce ng-repeat-startve aracılığıyla uygun desteği uyguladı ng-repeat-end. Bu geliştirme 1.0.7 (kararlı) ve 1.1.5 (istikrarsız) itibariyle piyasaya sürülmedi.

Güncelleme

Bu artık 1.2.0rc1'de mevcuttur. Resmi belgelere ve John Lindquist'in bu ekran video kaydına göz atın .

Birden fazla öğeye sahip olmak geçerli olabilir, ancak sabit üstbilgi / altbilgilerle kaydırılabilir bir ızgara oluşturmaya çalışıyorsanız, aşağıdaki yöntem işe yaramayacaktır. Bu kod, aşağıdaki CSS, jquery ve AngularJS'yi varsayar.

HTML

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

Kaydırılabilir tablo ızgarası için sabit üstbilgi / altbilgi oluşturmak için CSS

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

Tbody'in yatay kaydırmasını bağlamak için Jquery, bu işe yaramaz çünkü ng-tekrarı sırasında gövde tekrar eder.

$(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));

Bu cevapta gösterdiğim gibi, bu şekilde yapabilirsiniz: https://stackoverflow.com/a/26420732/769900

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