脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular自定义模糊查询、排序及三角箭头标注功能

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

 更新时间：2017年12月28日 11:38:50   作者：当爱0201  
这篇文章主要介绍了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('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-Cli中引用第三方库

    详解Angular-Cli中引用第三方库

    本篇文章主要介绍了详解Angular-Cli中引用第三方库 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Angular2+如何去除url中的#号详解

    Angular2+如何去除url中的#号详解

    这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料，文中先对#号去除的原因及方法进行详细的介绍和分析，然后通过示例代码给大家演示去除的方法，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。
    2017-12-12
  • angularjs手动识别字符串中的换行符方法

    angularjs手动识别字符串中的换行符方法

    今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 基于datepicker定义自己的angular时间组件的示例

    基于datepicker定义自己的angular时间组件的示例

    这篇文章主要介绍了基于datepicker定义自己的angular时间组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 深入解析Angular动态导入和懒加载实例

    深入解析Angular动态导入和懒加载实例

    这篇文章主要为大家深入解析了Angular动态导入和懒加载实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • AngularJS中一般函数参数传递用法分析

    AngularJS中一般函数参数传递用法分析

    这篇文章主要介绍了AngularJS中一般函数参数传递用法,结合实例形式分析了模型参数与普通参数的具体功能与使用技巧,需要的朋友可以参考下
    2016-11-11
  • Angular在模板驱动表单中自定义校验器的方法

    Angular在模板驱动表单中自定义校验器的方法

    本章介绍的是如何对模板驱动表单创建自定义校验器，它相比较响应式表单自定义校验器略为复杂一些。接下来通过本文给大家分享Angular在模板驱动表单中自定义校验器的方法，感兴趣的朋友一起看看吧
    2017-08-08
  • Angularjs实现数组随机排序的方法

    Angularjs实现数组随机排序的方法

    今天小编就为大家分享一篇Angularjs实现数组随机排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 基于angular实现树形二级表格

    基于angular实现树形二级表格

    这篇文章主要介绍了angular手写树形二级表格的完整代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧
    2016-01-01

最新评论