<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #000;
}
.top{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red;
}
.bot{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom:10px solid red;
}
</style>
<script src="angular-1.5.5/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function($scope){
$scope.data=[{
name:"张三",
wz:"男",
num:11,
ps:999
},{
name:"李四",
wz:"男",
num:21,
ps:888
},{
name:"王五",
wz:"男",
num:"23",
ps:777
},{
name:"赵六",
wz:"女",
num:10,
ps:666
},{
name:"周七",
wz:"女",
num:1,
ps:555
}];
$scope.sortColumn="num";
$scope.revers=false;
$scope.sort=function(column){
console.log(column);
if($scope.sortColumn==column){
$scope.revers=!$scope.revers;
}
$scope.sortColumn=column;
};
$scope.getClass=function(column){
if($scope.sortColumn==column){
if($scope.revers==true){
return "top"
}else{
return "bot"
}
}
};
$scope.sex="--请选择--";
$scope.filt=function(item){
if($scope.sex!="--请选择--"){
if(item.wz==$scope.sex){
return true;
}else{
return false;
}
}else{
return true;
}
}
$scope.fun=function(){
console.log($scope.sex);
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<select ng-model="sex" ng-click="fun()">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<table>
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th ng-click="sort('num')">球号<span ng-class="getClass('num')"></span></th>
<th ng-click="sort('ps')">得分<span ng-class="getClass('ps')"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|orderBy:sortColumn:revers|filter:filt">
<td>{{item.name
}}</td>
<td>{{item.wz}}</td>
<td>{{item.num}}</td>
<td>{{item.ps
}}</td>
</tr>
</tbody>
</table>
</body>
</html>
