angularJs ng-repeat を使用してテーブルマージ行効果を作成する-jsチュートリアル-php.cn

angularJs ng-repeat を使用してテーブルマージ行効果を作成する

不言

リリース： 2018-07-09 16:02:35

オリジナル

2497 人が閲覧しました

この記事では、angularJs ng-repeat を使用してテーブルと行をマージする効果を主に紹介します。これには、必要な友人が参照できるように共有します。

説明

テーブル
バックエンドによって返されたデータの効果

     [
         {"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 と等しい行をマージします。期待される効果は次のとおりです。図:

angularJs ng-repeat を使用してテーブルマージ行効果を作成する

分析:

まず、ng-repeat を使用して行 (tr) を走査して、バックエンドから返されたデータを確認します。図に示すように、マージ効果のないテーブルを取得します:

angularJs ng-repeat を使用してテーブルマージ行効果を作成する

それを解決するにはどうすればよいですか?思い浮かぶ解決策の 1 つは、同じ taskName を持つデータを 1 つにマージし、それを走査することです。

実装計画

まず、元のデータを処理します。私の場合、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><ul class=" list-paddingleft-2"><li>それでも ng- を実行する場合は、ここで HTML を見てください。 <tr> を繰り返すと、期待した効果が得られません。各データにはフィールド taskName が含まれており、ng-if='$index==0' コントロールを使用してマージ時に保持する必要があるのは 1 つだけであるため、前のレイヤー、つまり </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>

ログイン後にコピー

概要

元の配列を再構築するメソッドを作成するときに問題が発生しました。その後、同僚からのリクエストを受けて、より簡単な方法を使用しました。

さらに、それを達成する方法は複数ありますが、他の方法も試しましたが、これほど単純ではありません。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。