Angular实现的自定义模糊查询、排序及三角箭头标注功能示例

2019-11-19 14:37:48

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Angular实现的自定义模糊查询、排序及三角箭头标注功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm 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程序设计有所帮助。

上一篇：Angular实现的简单定时器功能示例

下一篇：vue+swiper实现侧滑菜单效果