Angular实现的内置过滤器orderBy排序与模糊查询功能示例


Posted in Javascript onDecember 29, 2017

本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

Angular实现的内置过滤器orderBy排序与模糊查询功能示例

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com Angular模糊查询、排序</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    table{
      margin: 100px auto;
      border-collapse: collapse;
    }
    th,td{
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
  <script src="angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.books=[{
        name:"JavaScript",public:false,update:"1504707661308",has:true
      },{
        name:"Angular权威教程",public:false,update:"1204707661308",has:false
      },{
        name:"Vue实战",public:false,update:"1804707661308",has:false
      },{
        name:"JavaScript",public:true,update:"1504707561308",has:true
      }];
      $scope.price="99.9";
      /*$scope.filt=""*/
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="filt">
<table>
  <thead><tr>
    <th>名字</th>
    <th>出版情况</th>
    <th>更新时间</th>
    <th>是否有库存</th>
  </tr></thead>
  <tbody>
  <!--|limitTo:2显示两条数据-->
  <tr ng-repeat="item in books | filter:filt |orderBy:'-name':false">
    <td>{{item.name|lowercase}}</td>
    <td>{{item.public}}</td>
    <td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td>
    <td>{{item.has}}</td>
  </tr>
  </tbody>
</table>
<div>{{price|currency:"¥"}}</div>
</body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
js 幻灯片的实现
Dec 06 Javascript
深入探讨前端框架react
Dec 09 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
ES6的解构赋值实例详解
May 06 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 #Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 #Javascript
js实现手机web图片左右滑动效果
Dec 29 #Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 #Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 #Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
You might like
php 小乘法表实现代码
2009/07/16 PHP
php 常用的系统函数
2017/02/07 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue实现放大镜效果
2020/09/17 Javascript
python通过post提交数据的方法
2015/05/06 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
语文教学随笔感言
2014/02/18 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
故宫的导游词
2015/01/31 职场文书
三好学生个人总结
2015/02/15 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript