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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
基于javascript编写简单日历
May 02 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python 如何展开嵌套的序列
2020/08/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
机电一体化自荐信
2013/12/10 职场文书
项目合作协议书范本
2014/04/16 职场文书
留学推荐信英文范文
2015/03/26 职场文书
节约用水广告语60条
2019/11/14 职场文书