微客导航 » 文章资讯 » 妙用Angularjs实现表格按指定列排序

妙用Angularjs实现表格按指定列排序

2024-02-18 09:24:03 343

使用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实现表格按指定列排序，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

妙用Angularjs实现表格按指定列排序

热门推荐

随机推荐