妙用Angularjs实现表格按指定列排序
使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下:
html代码:
inx name gender age score
js代码:
varapp=angular.module('myapp',[]); app.controller('orderByCtrl',function($scope){ $scope.col='name';//默认按name列排序 $scope.desc=0;//默认排序条件升序 $scope.data=[{ name:'name1', gender:'male', age:26, score:70 },{ name:'name2', gender:'female', age:24, score:84 },{ name:'name3', gender:'male', age:20, score:76 },{ name:'name4', gender:'female', age:22, score:64 }]; })
让运行界面好看些,使用了bootstrap.min.css样式库。为了交互性考虑,在表头增加了手指样式
th{ cursor:pointer; }
以上所述是小编给大家介绍的妙用Angularjs实现表格按指定列排序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!