AngularJs實現 每列排序，輸入查詢、插入升序降序圖示
阿新 • • 發佈：2019-01-01
<!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":"zs",
"age":"20",
"sex":"boy",
"salary":"15000"
},{
"name":"ls",
"age":"22",
"sex":"boy",
"salary":"13000"
},{
"name":"ww",
"age":"18",
"sex":"girl",
"salary":"12000"
}];
$scope.search="";
$scope.sort="name";
$scope.revers=false;
$scope.sortItem=function(column){
if($scope.sort==column){
$scope.revers=!$scope.revers;
}
$scope.sort=column;
};
$scope.getClass=function(column){
if($scope.sort==column){
if($scope.revers==false){
return "top";
}else{
return "bot";
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search">
<table>
<thead>
<tr>
<th>序號</th>
<th ng-click="sortItem('name')">姓名<span ng-class="getClass('name')"></span></th>
<th ng-click="sortItem('age')">年齡<span ng-class="getClass('age')"></span></th>
<th ng-click="sortItem('sex')">性別<span ng-class="getClass('sex')"></span></th>
<th ng-click="sortItem('salary')">薪資<span ng-class="getClass('salary')"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{'name':search}|orderBy:sort:revers">
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.salary}}</td>
</tr>
</tbody>
</table>
</body>
</html>