angularJs ng-repeat を使用してテーブルの行結合の効果を実現する方法 以下に、ng-reapt によるテーブルの結合の例を示します。

この記事では主に angularjs ng-repeat を使用してテーブルを結合する効果について説明します。ここでは、まだ見たことのない ng-repeat によるテーブルの結合の例を示します。次に、この記事を見てみましょう

説明

• 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}
     ]

背景:

テーブルをさらに表示するには同じ taskName に含まれるデータは、列名が taskName であり、等しい値を持つ行とマージされます。期待される効果は次のとおりです。は、一次元配列であり、直接 ng-repeat を使用して行 (tr) を走査すると、図に示すように、マージ効果のないテーブルが作成されます。思い浮かぶ解決策の 1 つは、同じ taskName を持つデータを 1 つにマージし、それを走査することです。

(さらに詳しく知りたい場合は、PHP 中国語 Web サイトangularjs 学習マニュアル にアクセスして学習してください)

実装計画

私の場合、最初に元のデータを処理して、同じ taskName を 1 つの部分に結合します。処理後のデータは次のとおりです:

[
    {"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 変数に代入するだけで使用できます。ページ

    var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i<list.length><p></p>
<p> ここで HTML を見てください。それでも </p>
<tr> で ng-repeat を実行すると、期待した効果は得られません。各データにはフィールド taskName が含まれており、ng-if='$index==0' コントロールを使用してマージ時に保持する必要があるのは 1 つだけであるため、前のレイヤー、つまり </tr>
<tbody> をトラバースする必要があります。 。 <a href="http://www.php.cn/course/47.html" target="_blank"></a><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>

概要

元の配列を再構築するメソッドを作成するときに問題が発生しました。その後、同僚からのリクエストを受けて、より簡単な方法を使用しました。
• さらに、それを達成する方法は複数ありますが、他の方法も試しましたが、これほど単純ではありません。
  この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
angularjs 学習マニュアル

にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください

。

以上がangularJs ng-repeat を使用してテーブルの行結合の効果を実現する方法 以下に、ng-reapt によるテーブルの結合の例を示します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。