Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
142 浏览量
2020-10-18
20:59:43
上传
评论
收藏 40KB PDF 举报
Angular实现的自定义模糊查询、排序及三角箭头标注功能示实现的自定义模糊查询、排序及三角箭头标注功能示
例例
主要介绍了Angular实现的自定义模糊查询、排序及三角箭头标注功能,涉及AngularJS针对页面table元素的遍
历、查询、判断、排序等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现的自定义模糊查询、排序及三角箭头标注功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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{
资源评论
