style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
border: 1px solid #000;
}
.top{
display: inline-block;
0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red;
}
.bot{
display: inline-block;
0;
height: 0;
border: 10px solid transparent;
border-bottom:10px solid red;
}
style>
script src="angular/angular.js"script>
script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
var userInfo=[
{name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
{name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
{name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
{name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
{name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
];
$scope.arr=userInfo;
/*自定义的模糊查询*/
$scope.search="";
$scope.searchFun=function(obj){
if($scope.search!=""){
if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
return true;
}else{
return false;
}
}else{
return true;
}
};
/* 排序*/
$scope.sort="name";
$scope.revers=false;
$scope.sortFun=function (column) {
if($scope.sort==column){
$scope.revers=!$scope.revers;
}else{
$scope.revers=false;
}
$scope.sort=column;
};
$scope.getClass=function(column){
if($scope.sort==column){
if($scope.revers==false){
return "top"
}else{
return "bot"
}
}
}
})
script>
input type="text"ng-model="search">
table>
thead>
th</th>
th ng-click="sortFun('name')"<span ng-class="getClass('name')"spanth>
th ng-click="sortFun('salary')"<span ng-class="getClass('salary')"spanth>
th ng-click="sortFun('sex')"<span ng-class="getClass('sex')"spanth>
th ng-click="sortFun('birthday')"<span ng-class="getClass('birthday')"spanth>
thead>
tbody>
tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort">
td$index}}td>
tditem.name|uppercase}}td>
tditem.salary|currency:'$'}}td>
tditem.sex}}td>
tditem.birthday|date:'yyyy-MM-dd'}}td>
tr>
tbody>
table>