Angularjsヘッダソート
6057 ワード
AngularJSのフィルタを使って、表の中で、ある列のタイトルをクリックして並べ替えを実現します
js: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の後 に置く
<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 ；