여러 tr에서 Angular.js ng-repeat

숨겨진 trs를 사용하여 tr을 표시하고 아래 td에서 div를 아래로 슬라이딩하여 슬라이딩 효과를 시뮬레이션하는 응용 프로그램에 Angular.js를 사용하고 있습니다. 이 프로세스는 <!-- ko:foreach -->두 개의 tr 요소를 모두 사용할 수 있기 때문에 이러한 행의 배열을 반복 할 때 knockout.js를 사용하여 환상적으로 작동했습니다 .

각도 ng-repeat를 사용하면 html 요소에 적용해야합니다. 즉, 표준 방법을 사용하여 이러한 이중 행을 반복 할 수없는 것 같습니다. 이에 대한 나의 첫 번째 응답은 이러한 이중 trs를 나타내는 지시문을 작성하는 것이었지만 지시문 템플릿에는 단일 루트 요소가 있어야하지만 두 개의 ( <tr></tr><tr></tr>) 가 있기 때문에 부족했습니다 .

ng-repeat 및 앵귤러에 대한 경험이있는 분이이 문제를 해결하는 방법을 설명해 주시면 대단히 감사하겠습니다.

(또한 ng-repeattbody에 첨부 하는 것은 선택 사항이지만 이것은 여러 tbody를 생성하며 표준 HTML에 대해서는 잘못된 형식이라고 가정하고 있지만 틀렸다면 수정합니다)

ng-repeaton을 사용 tbody하는 것이 유효한 것으로 보입니다 . 이 게시물을 참조하십시오 .

또한 html 유효성 검사기를 통한 빠른 테스트 tbody는 동일한 테이블에 여러 요소를 허용했습니다 .

업데이트 : 적어도 1.2 각도가 존재 ng-repeat-start하고 ng-repeat-end, 일련의 요소를 반복하도록 허용한다. 자세한 내용 은 설명서 를 참조하고 주석은 @Onite에게 감사드립니다!

AngularJS 개발자 @ igor-minar는 여러 요소에 걸쳐 Angular.js ng-repeat 에서 이에 대해 답변했습니다 .

Miško Hevery는 최근 ng-repeat-start및 ng-repeat-end. 이 개선 사항은 1.0.7 (안정) 및 1.1.5 (불안정)에서 릴리스되지 않았습니다.

최신 정보

이제 1.2.0rc1에서 사용할 수 있습니다. 공식 문서 와 John Lindquist의 스크린 캐스트 를 확인하십시오 .

여러 요소가있는 것이 유효 할 수 있지만 고정 머리글 / 바닥 글이있는 스크롤 가능한 그리드를 만들려는 경우 다음이 작동하지 않을 수 있습니다. 이 코드는 다음 CSS, jquery 및 AngularJS를 가정합니다.

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

#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의 수평 스크롤링을 바인딩하는 Jquery는 tbody가 ng-repeat 중에 반복되기 때문에 작동하지 않습니다.

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

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>