테이블 병합 효과를 얻기 위해 AngleJs ng-repeat를 사용하는 방법 다음은 테이블 병합을 수행하는 ng-reap의 예입니다.

이 글에서는 주로 ng-repeat를 사용하여 테이블을 병합하는 angularjs의 효과에 대해 설명합니다. 다음은 아직 보지 못한 ng-repeat 병합 테이블의 예입니다. 다음으로 이 글을 살펴보겠습니다

Description

• angularJs를 사용하여 테이블 병합 효과 만들기

• 백엔드에서 반환된 데이터

     [
         {"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},
         {"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},
         {"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71},
         {"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}
     ]

Background:

테이블을 더 보려면 직관적으로 동일한 taskName에 포함된 데이터, 열 이름 taskName 및 동일한 값으로 행을 병합하면 예상되는 효과는 다음과 같습니다.

분석:

먼저 백엔드에서 반환된 데이터를 보면, ng-repeat를 사용하여 행(tr)을 직접 탐색하면 그림과 같이 병합 효과 없이 테이블이 생성됩니다.

어떻게 해결하나요? 떠오르는 한 가지 해결책은 동일한 taskName을 가진 데이터를 하나로 병합한 다음 이를 순회하는 것입니다.

(자세한 내용을 보려면 PHP 중국어 웹사이트

angularjs 학습 매뉴얼을 방문하세요.)

구현 계획

• 먼저 원본 데이터를 처리합니다. 제 경우에는 동일한 taskName을 하나로 병합합니다. of data and re- 처리 후 데이터는 다음과 같습니다.

[
    {"taskName":"111","fileList":[{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73}]},
    {"taskName":"aaa","fileList":[{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71}]},
    {"taskName":"www","fileList":[{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}]}
]

재구성 방법은 다음과 같습니다. 배열 목록은 처리 결과를 $scope 변수에 할당하기만 하면 됩니다. the page

    var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i<list.length><ul class=" list-paddingleft-2"><li>이제 여기 HTML을 보세요. <tr>에서 계속 ng-repeat를 수행하면 기대한 효과를 얻지 못할 것입니다. 각 데이터 조각에 taskName 필드가 포함되어 있고 ng-if='$index==0' 컨트롤을 사용하여 병합할 때 하나만 유지하면 되므로 이전 레이어인 </tr>
<tbody>에서 순회해야 합니다. . <p></p>
<pre class="brush:php;toolbar:false">    <tbody>
        <tr>
          <td>{{file.taskName}}</td>
          <td>{{item.fileName}}</td>
          <td>{{item.startTime}}</td>
          <td>
            <span>
              <a>下载</a>
              <span>删除</span>
            </span>
           </td>
        </tr>
    </tbody>

Summary

원본 배열을 재구성하는 방법을 작성할 때 문제가 발생했습니다. 작성이 비교적 복잡했는데, 나중에 동료의 요청을 받아 지금은 더 간단한 방법을 사용하게 되었습니다.

또한 이를 달성하는 방법이 여러 가지 있습니다. 다른 방법도 시도해 보았지만 이만큼 간단하지는 않습니다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트

angularjs 학습 매뉴얼을 방문하여 학습하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요

위 내용은 테이블 병합 효과를 얻기 위해 AngleJs ng-repeat를 사용하는 방법 다음은 테이블 병합을 수행하는 ng-reap의 예입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!