Rumah > Artikel > hujung hadapan web > 使用Angular如何实现三角箭头标注功能

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

亚连asal: 2018-06-14 16:45:211852semak imbas

这篇文章主要介绍了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{
          $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(&#39;name&#39;)">姓名<span ng-class="getClass(&#39;name&#39;)"></span></th>
  <th ng-click="sortFun(&#39;salary&#39;)">薪资<span ng-class="getClass(&#39;salary&#39;)"></span></th>
  <th ng-click="sortFun(&#39;sex&#39;)">性别<span ng-class="getClass(&#39;sex&#39;)"></span></th>
  <th ng-click="sortFun(&#39;birthday&#39;)">生日<span ng-class="getClass(&#39;birthday&#39;)"></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:&#39;$&#39;}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.birthday|date:&#39;yyyy-MM-dd&#39;}}</td>
  </tr>
  </tbody>
</table>
</body>
</html>

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

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

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

详细解读Vue组件化开发思想

详细解读Vue.js中的组件使用方法以及作用？

Atas ialah kandungan terperinci 使用Angular如何实现三角箭头标注功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

vue.js angular webpack JS table

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用Angular如何实现定时器功能Artikel seterusnya：在vue+swiper中如何实现侧滑菜单效果

Artikel berkaitan

Lihat lagi