Angular.js ng lặp lại trên nhiều tr

Tôi đang sử dụng Angular.js cho một ứng dụng sử dụng trs ẩn để mô phỏng hiệu ứng trượt ra bằng cách hiển thị tr và trượt xuống div trong td bên dưới. Quá trình này hoạt động tuyệt vời bằng cách sử dụng knoutout.js khi lặp qua một mảng các hàng này, bởi vì tôi có thể sử dụng <!-- ko:foreach -->xung quanh cả hai phần tử tr.

Với góc, ng-repeatphải được áp dụng cho một phần tử html, có nghĩa là tôi dường như không thể lặp lại các hàng kép này bằng các phương thức tiêu chuẩn. Phản ứng đầu tiên của tôi về điều này là tạo ra một lệnh để thể hiện các trs kép này, nhưng điều đó đã bị rút ngắn vì các mẫu lệnh phải có một phần tử gốc duy nhất, nhưng tôi có hai ( <tr></tr><tr></tr>).

Nếu bất cứ ai có kinh nghiệm với ng-repeat và góc cạnh đã phá vỡ điều này có thể giải thích cách giải quyết vấn đề này, tôi sẽ rất cảm kích.

(Tôi cũng cần lưu ý rằng việc gắn ng-repeatvào tbody là một tùy chọn, nhưng điều này tạo ra nhiều tbodys và tôi cho rằng đó là hình thức xấu cho HTML tiêu chuẩn, mặc dù tôi đã sửa nếu tôi sai)

Sử dụng ng-repeattrên tbodydường như là hợp lệ xem bài này .

Ngoài ra một thử nghiệm nhanh thông qua trình xác nhận html cho phép nhiều tbodyphần tử trong cùng một bảng.

Cập nhật: Kể từ ít nhất Angular 1.2, có ng-repeat-startvà ng-repeat-endcho phép lặp lại một loạt các yếu tố. Xem tài liệu để biết thêm thông tin và cảm ơn @Onite cho nhận xét!

Nhà phát triển AngularJS @ igor-minar đã trả lời điều này trong Angular.js ng-repeat trên nhiều yếu tố .

Miško Hevery gần đây đã thực hiện hỗ trợ thích hợp thông qua ng-repeat-startvà ng-repeat-end. Cải tiến này chưa được phát hành kể từ 1.0.7 (ổn định) và 1.1.5 (không ổn định).

Cập nhật

Điều này hiện có sẵn trong 1.2.0rc1. Kiểm tra các tài liệu chính thức và screencast này của John Lindquist.

Có nhiều yếu tố có thể hợp lệ nhưng nếu bạn đang cố gắng xây dựng một lưới có thể cuộn với tiêu đề / chân trang cố định, việc theo dõi sẽ không thể hoạt động. Mã này giả định CSS, jquery và AngularJS sau đây.

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>

CSS để xây dựng tiêu đề / chân trang cố định cho lưới bảng có thể cuộn

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

Jquery để liên kết cuộn ngang của tbody, điều này không hoạt động vì tbody lặp lại trong quá trình lặp lại.

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

Bạn có thể làm theo cách này, như tôi đã chỉ ra trong câu trả lời này: 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>