使用Angular如何实现三角箭头标注功能

这篇文章主要介绍了angular实现的自定义模糊查询、排序及三角箭头标注功能,涉及angularjs针对页面table元素的遍历、查询、判断、排序等相关操作技巧,需要的朋友可以参考下

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

先来看看运行效果：

具体代码如下：

nbsp;html>          *{      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;    }          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"          }        }      }    })  

登录后复制  

        {{$index}}    {{item.name|uppercase}}    {{item.salary|currency:’$’}}    {{item.sex}}    {{item.birthday|date:’yyyy-MM-dd’}}    

注：代码中尚有功能不够完善的部分，感兴趣的朋友可以自行加以完善。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过webpack如何打包koa2 框架app，该怎么做？

通过webpack如何打包koa2 框架app，该怎么做？

通过webpack如何打包koa2 框架app，该怎么做？

以上就是使用Angular如何实现三角箭头标注功能的详细内容，更多请关注【创想鸟】其它相关文章！