<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
margin-top: 10px;
}
table td,th{
border: 1px solid #000000;
}
.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 app=angular.module("myapp",[]);
app.controller("mycontroller",function ($scope) {
$scope.arr=[
{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.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 (colnum) {
if($scope.sort==colnum){
$scope.revers=!$scope.revers;
}else {
$scope.revers=false;
}
$scope.sort=colnum;
};
/*获取类的方法*/
$scope.getClass=function (colnum) {
if ($scope.sort==colnum){
if($scope.revers==false){
return "top";
}else {
return "bot";
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<input type="text" ng-model="search">
<table>
<thead>
<th>编号</th>
<th ng-click="sortfun('name')">姓名<span ng-class="getClass('name')"></span></th>
<th ng-click="sortfun('salary')">薪资<span ng-class="getClass('salary')"></span></th>
<th ng-click="sortfun('sex')">性别<span ng-class="getClass('sex')"></span></th>
<th ng-click="sortfun('birthday')">生日<span ng-class="getClass('birthday')"></span></th>
</thead>
<!--filter:searchFun:search 按照自定义字段查询-->
<tr ng-repeat="item in arr|filter:searchFun:search|orderBy:sort:revers">
<!--得到索引-->
<td>{{$index}}</td>
<!--转换成大写-->
<td>{{item.name|uppercase}}</td>
<!--过滤成美元符号-->
<td>{{item.salary|currency:'$'}}</td>
<td>{{item.sex}}</td>
<!--过滤成年月日-->
<td>{{item.birthday|date:'yyyy-mm-dd'}}</td>
</tr>
</table>
</body>
</html>
angular js 自定义字段查询+自定义排序+获取类的方法
最新推荐文章于 2022-06-01 20:01:26 发布