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 XML数据显示为HTML一例
Dec 23 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
node.js命令行教程图文详解
May 27 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中数据的批量导入(csv文件)
2006/10/09 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python实现动态创建类的方法分析
2019/06/25 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
部队领导证婚词
2014/01/12 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
python3中apply函数和lambda函数的使用详解
2022/02/28 Python