Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
时间:2021-02-20 09:07:43|栏目:AngularJS|点击: 次
本文实例讲述了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{ $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程序设计有所帮助。
上一篇:AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
栏 目:AngularJS
下一篇:后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
本文标题:Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
本文地址:http://www.codeinn.net/misctech/66560.html