Angularjsヘッダソート

AngularJSのフィルタを使って、表の中で、ある列のタイトルをクリックして並べ替えを実現します

 <table>
      <thead>
           <th ng-click="col='cpu';desc=!desc">ipth>
           <th ng-click="col='virtualIp';desc=!desc">  ipth>
           <th ng-click="col='systemType';desc=!desc">    th>
           <th ng-click="col='cpu';desc=!desc">cputh>
           <th ng-click="col='memory';desc=!desc">  th>
           <th ng-click="col='swap';desc=!desc">swapth>
           <th ng-click="col='severity';desc=!desc">  th>
     thead>
     <tbody>
         <tr ng-repeat="x in hostdata|orderBy:col:desc track by x.ip" >
            <td>{{x.ip}}td>
            <td>{{x.virtualIp}}td>
            <td>{{x.systemType}}td>
            <td>{{x.cpu}}td>
            <td>{{x.memory}}td>
            <td>{{x.swap}}td>
            <td>{{x.severity}}td>               
         tr>
     tbody>
 table>

js:

 $scope.hostdata=res.data.hosts; //         
 $scope.col = 'severity'   //       
 $scope.desc = 1     //1   ,0   ；

1、まずコントローラに「col」と「desc」の2つの属性を追加する必要があります.それぞれ、ソート時の属性名とソート方向をバインドし、初期値「severity」と1を付与し、データの初期化時に「アラート」属性の降順で

並ぶことを示します.

2、ページのビューテンプレートでは、ng-repeatコマンドでデータをコピーして表示すると、「orderBy」フィルタが呼び出され、2つのパラメータがあります.

3、1番目のコロン後のパラメータはソートの属性名を指定し、2番目のコロン後のパラメータはソートの方向を指定した.このパラメータのデフォルトまたはデフォルトは昇順、1は降順、0は昇順です.

4、最後に、各ヘッダ要素のクリック(ng-click)イベントでは、「title」と「desc」の属性値がそれぞれリセットされる.この2つの値は、「orderBy」のフィルタの2つのパラメータにバインドされているため、この2つの値が変化すると、データ表示時のソート属性名と方向が自動的に変更される最終的に、クリックヘッダのプロパティに従ってソートする機能を実現します.

5、データが変化した場合(track byがない場合)、ng-repeatは私たちのDomツリーを再リフレッシュします.ここでのリフレッシュは、既存の要素をすべて削除し、Domノードを再生成し、番号を付けます.これにより、カートンまたはパフォーマンスが低下します.track byという属性を加えると、ng-repeatは私たちが指定した符号化に従ってオブジェクトを表示し、データが変化したときにこのDomを更新し、再生成するのではなく、ここで指定したオブジェクトが唯一であることを要求します.track byはorderByの後

に置く