Angular.js ng-복수의 tr에 걸쳐 반복

Angular.js ng-복수의 tr에 걸쳐 반복

숨겨진 trs를 사용하여 tr을 표시하고 아래 td의 div를 아래로 슬라이드하여 슬라이딩 효과를 시뮬레이트하는 어플리케이션에 Angular.js를 사용하고 있습니다.는 knocko하여 이들의 배열을 할 때 했습니다. knocko.js를 사용할 수 때문입니다.왜냐하면 이 경우 를 사용할 수 있기 때문입니다.<!-- ko:foreach -->두 Tr 요 、 위 에 다 다 다 다 다 。

있는 , 진진 with with with with withng-repeat요소에 해야 합니다.즉, 표준 이러한 수 것 같습니다.html 요 、 、 must must 、 must must 、 must must 、 must must 、 must must must must must must 。 첫 만, 1개의 요소가 저는 2개의 루트 를 가지고 있습니다( 「 」 「 」 「 」 「 tr 」 「 」 。<tr></tr><tr></tr>를 참조해 주세요.

ng-repeat 경험이 있고 각도가 있는 분 중에 이 문제를 어떻게 해결해야 하는지 설명해 주시면 감사하겠습니다.

(( that한)도 해 주세요ng-repeat의 tbody가에 의해표준 에 , 해 주세요) tbody 는 이 될 수 .

「」를 사용합니다.ng-repeattbody유효하다고 생각됩니다.이 투고를 참조해 주세요.

또한 html 검증기를 통한 빠른 테스트로 여러 번 가능tbody★★★★★★★★★★★★★★★★★★★★★★★★★★★

업데이트: 최소 Angular 1.2 현재,ng-repeat-start ★★★★★★★★★★★★★★★★★」ng-repeat-end일련의 요소를 반복할 수 있습니다.상세한 것에 대하여는, @Onite 의 코멘트에 감사하는 문서를 참조해 주세요.

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

Mishko Hevery를 통해 적절한 했습니다.ng-repeat-start ★★★★★★★★★★★★★★★★★」ng-repeat-end이 확장 기능은 1.0.7(안정적) 및 1.1.5(불안정적) 시점에서는 출시되지 않았습니다.

갱신하다

이 기능은 1.2.0rc1로 이용할 수 있게 되었습니다.공식 문서와 존 린드퀴스트의 이 스크린캐스트를 보세요.

여러 요소를 포함하는 것이 유효할 수 있지만 고정된 머리글/바닥글을 사용하여 스크롤 가능한 그리드를 구축하려는 경우 다음 기능이 작동하지 않습니다.이 코드는 다음 CSS, jquery 및 Angular를 전제로 합니다.JS.

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의 수평 스크롤을 바인딩하는 쿼리. ng-repeat 중에 tbody가 반복되기 때문에 이 작업은 수행되지 않습니다.

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

언급URL : https://stackoverflow.com/questions/12979205/angular-js-ng-repeat-across-multiple-trs