angularjs表头排序

使用AngularJS的过滤器，实现在表格中，点击某一列标题进行排序

 <table>      <thead>           <th ng-click="col='cpu';desc=!desc">ip</th>           <th ng-click="col='virtualIp';desc=!desc">服务ip</th>           <th ng-click="col='systemType';desc=!desc">操作系统</th>           <th ng-click="col='cpu';desc=!desc">cpu</th>           <th ng-click="col='memory';desc=!desc">内存</th>           <th ng-click="col='swap';desc=!desc">swap</th>           <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”两个属性,分别用于绑定排序时的属性名称和排序方向，并赋予初始值“severity”和1,表示数据初始化时按“告警”属性的降序排列
• 2、页面的视图模板中，当通过ng-repeat指令复制并显示数据时，调用了”orderBy”过滤器，并带有两个参数；
• 3、第一个冒号后的参数指定排序的属性名，第二个冒号后的参数指定了排序是的方向；该参数默认或缺省时为升序,1为降序,0为升序；
• 4、最后，在各个表头元素的点击(ng-click)事件中，分别对”title”和“desc”属性值进行重置，由于这两个值已与“orderBy”的过滤器的两个参数绑定，所以当这两个值发生变化时，自动改变数据显示时的排序属性名称和方向，最终实现按单击表头属性排序的功能；
• 5、当数据发生变化时（没有track by的情况下），ng-repeat会重新的刷新我们的Dom树，这里的刷新是指的删除掉所有已有的元素，然后重新生成Dom节点，并编号。这会导致卡顿或者性能降低。加入track by这个属性的时候，ng-repeat会按照我们指定的编码去标示一个对象，并在数据发生变化时，去更新这个Dom，而不是重新生成，这里也要求我们指定的对象是唯一的。track by要放在orderBy 之后