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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
JSONP之我见
Mar 24 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 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中的strpos使用示例
2014/02/27 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js实现表格字段排序
2014/02/19 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python将视频转换为全字符视频
2019/04/26 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
python 实现表情识别
2020/11/21 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
难忘的一课教学反思
2014/04/30 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
五年级学生评语大全
2014/12/26 职场文书
党员个人总结范文
2015/02/14 职场文书
小学远程教育工作总结
2015/08/13 职场文书