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中的回调函数(callback)
Sep 02 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python中的localtime()方法使用详解
2015/05/22 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
协议书模板
2014/04/23 职场文书
2014年学校工作总结
2014/11/20 职场文书
大学生毕业评语
2014/12/31 职场文书
个人委托书范文
2015/01/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
MySQL 数据表操作
2022/05/04 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers