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. yii2.0 的数据的 查 删

    数据的查询 /**     * 查询正在使用的数据 model 层     */ public function selectdata(){ return $this->find()->a ...

  2. 使用Gson排除特定字段

    http://blog.csdn.net/hknock/article/details/51037564

  3. java中的URLConnection和HttpURLConnection

    URL url = new URL(strUrl); URLConnection con = url.openConnection(); URL url = new URL(strUrl); Http ...

  4. iOS学习01C语言数据类型

    1.注释 // 单行注释 // 注释对代码起到解释说明的作用,注释是给程序员看的,不参与程序运行 /*  多行注释  Xcode快捷键  全选 cmd+a  复制 cmd+c  粘贴 cmd+v  设 ...

  5. Fault Tolerance —— Storm的故障容错性

     ——本文讲解了Storm故障容忍性(Fault-Tolerance)的设计细节:当Worker.节点.Nimbus或者Supervisor出现故障时是如何实现故障容忍性,以及Nimbus是否存在单点 ...

  6. BZOJ2190: [SDOI2008]仪仗队

    Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是 ...

  7. Thymeleaf基本知识

    Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...

  8. Eclipse 使用maven创建Dynamic Web Project

    今天看到spring的官网首页已经没有下载连接了,建议使用maven构建spring项目.虽然maven已经不是新技术,但是这个我还没用过,谷歌走起! 通常创建项目都是用Eclipse,前几年还是My ...

  9. JS中常遇到的浏览器兼容问题和解决方法【转】

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  10. GO语言练习：值与引用

    1.代码 2.运行 package main import "fmt" func testValue(){ fmt.Println("for value") v ...