本文实例讲述了Angular实现的自定义模糊查询、排序及三角箭头标注功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>www.freexyz.cn Angular模糊查询、排序</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
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.min.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>
</head>
<body ng-app=\"myapp\" ng-controller=\"myCtrl\">
<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>
<tbody>
<tr ng-repeat=\"item in arr|filter:searchFun:value|orderBy:sort\">
<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>
</tbody>
</table>
</body>
</html>
注：代码中尚有功能不够完善的部分，感兴趣的朋友可以自行加以完善。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
© 版权声明
THE END
暂无评论内容