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 相关文章推荐
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
微信小程序开发探究
Dec 27 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 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
PHP 上传文件的方法(类)
2009/07/30 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
简单理解Python中的装饰器
2015/07/31 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python+flask实现API的方法
2018/11/21 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python实现word2Vec model过程解析
2019/12/16 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
银行主办会计岗位职责
2014/08/13 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python