html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularFilter</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
<script src="../js/product.js"></script>
</head>
<body ng-app="myApp" ng-controller="productController">

<div class="container">
<form class="navbar-form pull-left">
<input type="text" class="span2" placeholder="Search" ng-model="search.id">
</form>
<table class="table">
<thead>
<tr>
<!--dropup：true 这个class就显示，即升序，否则不显示！-->
<!--注意，这里是ng-class，还有droupup:order中间是没有任何空格的！！！！-->
<th ng-class="{dropup:order ===''}" ng-click="changeOrder('id')">
产品编号<span class="caret"></span>
</th>
<th ng-class="{dropup:order ===''}" ng-click="changeOrder('name')">
产品名称<span class="caret"></span>
</th>
<th ng-class="{dropup:order === ''}" ng-click="changeOrder('price')">
产品价格<span class="caret"></span>
</th>
</tr>
</thead>
<tbody>
<!--<tr ng-repeat="product in products | filter:{id:search}">-->
<!--order+orderType注意这两个字段是有顺序的 不能反着写-->
<tr ng-repeat="product in products | filter:search | orderBy : order+orderType">
<td>
{{product.id}}

</td>
<td>
{{product.name}}

</td>
<td>
{{product.price | currency : "(RMB)"}}

</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Js代码

var app = angular.module("myApp",[]);

app.service("products",function(){
return [{
id : 1111,
name : "iphone",
price : 5000
},{
id : 2222,
name : "iphone 4",
price : 1993
},{
id : 1091,
name : "iphone 5",
price : 2893
},{
id : 1792,
name : "iphone 6",
price : 4500
}];
});

app.controller("productController",function($scope,products){
$scope.products = products;//Angular自动注入

//排序条件
$scope.order = "-";//默认是升序,-表示降序
$scope.orderType = "id" ;//以id来排序,不能直接在页面以id这个字段排序

$scope.changeOrder = function(type){
$scope.orderType = type ;
//如果本来是降序，就变为升序，如果是升序，就变为降序
if($scope.order===''){
$scope.order = '-';
}else{
$scope.order = '';
}
}
});

注意：注意标红色的代码，只需过滤器filter:search和input搜索框绑定的ng-model的search.XX就可以,XX表示products（上面绿色部分）的某一属性，即根据该属性来进行过滤！！！

angularJs模糊查询的更多相关文章

  1. angularjs实现购物车批量删除，filter模糊查询，排序

    数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...

  2. Mybatis框架的模糊查询（多种写法）、删除、添加（四）

    学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构 二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...

  3. js—模糊查询

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...

  4. mybatis : trim标签, “等于==”经验, CDATA标签 ,模糊查询CONCAT,LIKE

    一.My Batis trim标签有点类似于replace效果. trim 属性, prefix:前缀覆盖并增加其内容 suffix:后缀覆盖并增加其内容 prefixOverrides:前缀判断的条 ...

  5. combobox实现模糊查询自动填充

    利用winform设计软件界面时,经常用到combobox控件,但有时需要绑定数据表中的数据,更进一步,需要实现对数据表中数据的模糊查询功能.本文就讲讲述如何用C#实现combobox下拉列表的模糊查 ...

  6. [转]ORACLE中Like与Instr模糊查询性能大比拼

    instr(title,'手册')>0  相当于  title like '%手册%' instr(title,'手册')=1  相当于  title like '手册%' instr(titl ...

  7. 关系数据库SQL之基本数据查询:子查询、分组查询、模糊查询

    前言 上一篇关系数据库常用SQL语句语法大全主要是关系型数据库大体结构,本文细说一下关系型数据库查询的SQL语法. 语法回顾 SELECT [ALL|DISTINCT] <目标列表达式>[ ...

  8. StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改

    前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...

  9. SQL SERVER 的模糊查询 LIKE

    今天写个动态脚本,需要把数据库里面包含“USER_"的表删除掉,突然想不起来如何搜索通配字符了,赶紧查查MSDN,整理了下模糊查询的知识点,留着以后查阅用. LIKE模糊查询的通配符 通配符 ...

随机推荐

  1. Eclipse 的 Debug 介绍与技巧【转载】

    没有任何程序员能够一气呵成的写出没有任何 Bug 的代码,所以很多程序员有相当一部分时间是花费在 Debug 上的,程序调试是每个程序员必须面对的工作.如何使用 Eclipse 进行有效的.尤其是高效 ...

  2. Swift3.0语言教程字符串与URL的数据转换与自由转换

    Swift3.0语言教程字符串与URL的数据转换与自由转换 Swift3.0语言教程字符串与URL的数据转换 Swift3.0语言教程字符串与URL的数据转换与自由转换,字符串中的字符永久保存除了可以 ...

  3. 车销送货上门专用无线开单器-自带PDA无线移动开单系统 与云服务器连接

    浩瀚技术配套PDA终端软件 本软件与 数据采集器搭配销售,PDA端软件不单独销售也不含电脑端管理软件 数据采集器 一维扫描头+WIFI+蓝牙+一体打印+PDA软件.  产品特点: 1:通过操作移动手持 ...

  4. PHP 自带查询运行内存的函数

    memory_get_usage - 返回分配给 PHP 的内存量 int memory_get_usage ([ bool $real_usage = false ] ) 返回当前分配给你的 PHP ...

  5. 【转】win8.1下安装ubuntu

    参考:http://jingyan.baidu.com/article/14bd256e0ca52ebb6d26129c.html Ubuntu 系统是一款优秀的.基于GNU/Linux 的平台的桌面 ...

  6. spring MVC 的MultipartFile转File？？

    MultipartFile file = xxx;         CommonsMultipartFile cf= (CommonsMultipartFile)file;         DiskF ...

  7. 餐厅点餐系统app第二天

    队友: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...

  8. Image Transformation in WPF输入日志标题

    Image transformation is a process of rotating and scaling images. Rotating Images There are two ways ...

  9. xenu工具介绍

    Xenu Link Sleuth 也许是你所见过的最小但功能最强大的检查网站死链接的软件了.你可以打开一个本地网页文件来检查它的链接,也可以输入任何网址来检查.它可以分别列出网站 的活链接以及死链接, ...

  10. HDU 3720 Arranging Your Team(DFS)

    题目链接 队内赛里,匆匆忙忙写的. #include <cstdio> #include <cstring> #include <iostream> #includ ...