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


Posted in Javascript onDecember 28, 2017

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

先来看看运行效果:

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

具体代码如下:

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

Javascript 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 #Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript实现Base64编码转换
2016/04/23 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python3中的md5加密实例
2018/05/29 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
NET程序员上机面试题
2015/05/23 面试题
公司办公室岗位职责
2014/03/19 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL