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 相关文章推荐
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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生成不重复标识符的方法
2014/11/21 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
js压缩利器
2007/02/20 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python构建深度神经网络(DNN)
2018/03/10 Python
anaconda如何查看并管理python环境
2019/07/05 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
八年级数学教学反思
2014/01/31 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
走进毛泽东观后感
2015/06/04 职场文书