html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css"/>
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap-theme.css">
<style>
.orderColor{
color: red;
}
</style>
</head>
<body> <div ng-app="product">
<div class="container" ng-controller="productController">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
</div>
</nav>
<table class="table">
<thead>
<tr >
<th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">
id
<span ng-class="{orderColor:orderType==='id'}" class="caret"></span>
</th>
<th ng-click="changeOrder('name')" ng-class="{dropup:order === ''}">
name
<span ng-class="{orderColor:orderType==='name'}" class="caret"></span>
</th>
<th ng-click="changeOrder('price')" ng-class="{dropup:order === ''}">
price
<span ng-class="{orderColor:orderType==='price'}" class="caret"></span>
</th>
</tr>
</thead>
<tbody>
<!--filter:ng-model名-->
<tr ng-repeat="product in productData | filter:search | orderBy:order + orderType">
<td>
{{product.id}}
</td>
<td>
{{product.name}}
</td>
<td>
{{product.price | currency:"¥"}}
</td>
</tr>
</tbody>
</table>
</div>
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> </body>
</html>

js:

angular.module('product', [])
.service('productData', function () {
return [
{
id: 3333,
name: "iphone",
price: 5500
},
{
id: 3334,
name: "ipad4",
price: 3300
},
{
id: 3400,
name: "iwatch",
price: 2400
}
]
})
.controller('productController', function ($scope, productData) {
$scope.productData = productData;
$scope.orderType = "id";
$scope.order = '-'; $scope.changeOrder = function (type) {
$scope.orderType = type;
if($scope.order === ''){
$scope.order = '-';
}else{
$scope.order = '';
}
}
})

运行结果:

  

angularJS1笔记-(5)-过滤器练习的更多相关文章

  1. angularJS1笔记-(6)-自定义过滤器

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. [Java] JSP笔记 - Filter 过滤器

    一.什么是Web过滤器 Servlet API 很久以前就已成为企业应用开发的基石,而 Servlet 过滤器则是对 J2EE 家族的相对较新的补充. Servlet 过滤器是可插入的 Web 组件, ...

  3. 学习笔记_过滤器应用_1(分ip统计网站的访问次数)

    分ip统计网站的访问次数 ip count 192.168.1.111 2 192.168.1.112 59 统计工作需要在所有资源之前都执行,那么就可以放到Filter中了. 我们这个过滤器不打算做 ...

  4. Java_Web学习笔记_过滤器应用案例(解决全站字符乱码)

    解决全站字符乱码(POST和GET中文编码问题) servlet: l  POST:request.setCharacterEncoding(“utf-8”); l  GET: String user ...

  5. 学习笔记_过滤器详细_2(过滤器JavaWeb三大组件之一)

    过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...

  6. 学习笔记_过滤器详细(过滤器JavaWeb三大组件之一)

    过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l)  init(FilterConfig):在服务器启动时会创建Filte ...

  7. 学习笔记_过滤器概述(过滤器JavaWeb三大组件之一)

    过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...

  8. JavaWeb学习笔记九 过滤器、注解

    过滤器Filter filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 步骤: 编写一个过滤器的类实现Filter接口 实现接口中尚未实现的 ...

  9. HBase笔记6 过滤器

    过滤器 过滤器是GET或者SCAN时过滤结果用的,相当于SQL的where语句 HBase中的过滤器创建后会被序列化,然后分发到各个region server中,region server会还原过滤器 ...

随机推荐

  1. Golang从文件服务器获取图片显示到客户端

    一.需求 A(客户端)--------------->B(服务端)-------------->C(文件服务器) 在客户端需要显示图片列表,但是不想C(文件服务器)的地址被暴露出来,所以现 ...

  2. BLACKPYTHON学习(一)

    C/S结构了解 所谓的C/S就是客户端(client)和服务器端(server)的简称,也就是在基于这个的基础上编写相关的代码:一个就是客户端一个就是服务端. TCP(client) 客户端编写 #因 ...

  3. ruby安装卸载

    1.用命令yum install ruby安装,是2.0以下的版本.不建议使用 2.2.2以上  下载地址:https://www.ruby-lang.org/en/news/2018/03/28/r ...

  4. Mysql试题集锦

    1.一张表,里面有 ID 自增主键,当 insert 了 17 条记录之后,删除了第 15,16,17 条记录,再把 Mysql 重启,再 insert 一条记录,这条记录的 ID 是 18 还是 1 ...

  5. python简单计时器实现

    实现程序运行时间的显示与相互之间的计算: 实现代码: import time as t class Mytimer(): def __init__(self): self.unit=["年& ...

  6. 如何在忘记mysql的登录密码时更改mysql登录的密码(window及linux)

    最近一直在边学习边开发java项目,理所当然的就少不了跟数据库打交道了,但是有时候就会脑子一短路,把mysql的登录密码给忘记了,这个时候我们又很急切的需要进到数据库中查看数据,那这个时候要怎么才能改 ...

  7. Oracle中解析XMLType格式字段

    背景:项目从某数据交换平台获取XML数据,以Oracle的XMLType格式保存在数据库字段中,需要建立触发器.存储过程,在保存数据时解析XML字段,将数据写入其他业务表中. 参考资料:Oracle的 ...

  8. CHAPTER 19 Ordering the World 第19章 分类世界

    CHAPTER 19 Ordering the World 第19章 分类世界 Our planet is home to a bewildering variety of plants and an ...

  9. VMware vCenter Converter迁移Linux系统虚拟机

    (一)简介VMware vCenter Converter Standalone,是一种用于将虚拟机和物理机转换为 VMware 虚拟机的可扩展解决方案.此外,还可以在 vCenter Server ...

  10. NO.2:自学tensorflow之路------BP神经网络编程

    引言 在上一篇博客中,介绍了各种Python的第三方库的安装,本周将要使用Tensorflow完成第一个神经网络,BP神经网络的编写.由于之前已经介绍过了BP神经网络的内部结构,本文将直接介绍Tens ...