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

2024-10-02 02:31:34

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

AngularJS使用ng-options指令实现下拉框
AngularJS使用ng-repeat指令实现下拉框
Angularjs实现带查找筛选功能的select下拉框示例代码
Angular.js中下拉框实现渲染html的方法
Angular.JS中select下拉框设置value的方法
Angularjs实现下拉框联动的示例代码
AngularJS中下拉框的基本用法示例
AngularJS中下拉框的高级用法示例
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Angular实现下拉框模糊查询功能示例

Angular.js中下拉框实现渲染html的方法

前言大家都知道angualrjs处于安全的考虑,插值指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框代码如下: <body ng-app="app" ng-controller="controller"> <select ng-model="value" ng-options="t.text for t in testList">&l
Angular.JS中select下拉框设置value的方法

前言本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致代码: <!DOCTYPE html> <html lang
AngularJS中下拉框的高级用法示例

本文实例讲述了AngularJS中下拉框的高级用法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp">  <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for
Angularjs实现下拉框联动的示例代码

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
AngularJS中下拉框的基本用法示例

本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option
AngularJS使用ng-options指令实现下拉框

ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
Angular实现下拉框模糊查询功能示例

本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
Angular实现的内置过滤器orderBy排序与模糊查询功能示例

本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular模糊查询.排序</title> <style> *{ ma
Angularjs实现带查找筛选功能的select下拉框示例代码

前言对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
AngularJS使用ng-repeat指令实现下拉框

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

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

您可能感兴趣的文章:

相关推荐

随机推荐