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. AspNetPager 样式以及使用（漂亮）

    自定义样式: <style type="text/css"> /*拍拍网风格*/ .paginator { font: 11px Arial, Helvetica, s ...

  2. 解决嵌入WinForm的WPF控件无法显示图片问题

    解决办法是在控件初始化时,通过下面方法再次加载图片: ucCanvas.CreateCoordinateImage.Source = GetImageIcon(global::MainApplicat ...

  3. BZOJ2981 : [Poi2002]括号

    对于最终加入了括号的序列,对其求中缀表达式,建树. 可以发现$n-1$个运算符DFS序递增,且若一个-上方往左走了奇数次,则它就是+,否则就是-. 所以考虑DP,设$f[i][j]$表示考虑了前$i$ ...

  4. 51Nod 1079 中国剩余定理 Label:数论

    一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % 2 = 1, K % 3 = 2, K % 5 = 3.符合条件的最小的K = 23.   Input 第1行:1个数 ...

  5. xenu工具介绍

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

  6. [ACM训练] DEV C++如何处理不能调试

    复试上机一定要用DEV C++,使用不熟练,出现一些问题,记录如下: 1.DEV C++ 不能调试 (1)tools->compiler option->settings:linker里设 ...

  7. BZOJ 1054 题解

    1054: [HAOI2008]移动玩具 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1888  Solved: 1035[Submit][Stat ...

  8. BZOJ4532: [BeiJing2014 WinterCamp] 珠链

    Description Alex喜欢玩网络游戏,认为这是智力和体力的综合锻炼.在一次游戏活动中,他意外获得了一个传说中威力极其强大的法宝:珠链.  珠链,顾名思义,就是由许多小珠子串起来的一条链.珠子 ...

  9. 递归函数的用法及array_merge的用法

    $info=M('navclass')->select(); function getAllArray($data, $pid =1) { $arr = array(); foreach ($d ...

  10. HDU 2089 简单数位dp

    1.HDU 2089  不要62    简单数位dp 2.总结:看了题解才敲出来的,还是好弱.. #include<iostream> #include<cstring> #i ...