Angularjs轻松实现表格按指定列排序
2016-07-26 15:31
471 查看
使用Angularjs的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下:
html代码:
js代码:
运行结果点击这里查看
html代码:
<table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';desc=!desc">name</th> <!-- 当点击列标题时,执行click事件,将排序条件反转,即,如果原来是升序则将按降序,降序亦如此 --> <th ng-click="col='gender';desc=!desc">gender</th> <th ng-click="col='age';desc=!desc">age</th> <th ng-click="col='score';desc=!desc">score</th> </tr> </thead> <tbody> <tr ng-repeat="d in data|orderBy:col:desc"> <td ng-bind="$index+1"></td> <td ng-bind="d.name"></td> <td ng-bind="d.gender"></td> <td ng-bind="d.age"></td> <td ng-bind="d.score"></td> </tr> </tbody> </table>
js代码:
var app = angular.module('myapp', []); app.controller('orderByCtrl', function($scope) { $scope.col = 'name';//默认按name列排序 $scope.desc = 0;//默认排序条件升序 $scope.data = [{ name: 'name 1', gender: 'male', age: 26, score: 70 }, { name: 'name 2', gender: 'female', age: 24, score: 84 }, { name: 'name 3', gender: 'male', age: 20, score: 76 }, { name: 'name 4', gender: 'female', age: 22, score: 64 }]; })
运行结果点击这里查看
相关文章推荐
- ionic,angularjs,requirejs 结合开发 web
- AngularJS digest循环
- angularJS在directive的template中使用ng-template
- 深究AngularJS——ui-router详解
- ANGULAR2 深入学习路由
- AngularJS:何时应该使用Directive、Controller、Service?
- angularjs各版本下载
- 解决AngularJS中ng-repeat不更新视图的问题
- AngularJS控制div隐藏或显示-ng-show
- AngularJS改变div css样式
- AngularJS双向数据绑定演示
- AngularJs的UI组件ui-Bootstrap分享(十)——Model
- AngularJS Scope(作用域)
- AngularJS 模型
- AngularJS 指令
- AngularJS 表达式
- AngularJS 简介
- AngularJS执行流程详解
- Ueditor angularjs化过程记录(重点在于验证)
- Angular.js