angularJS1笔记-(5)-过滤器练习
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)-过滤器练习的更多相关文章
- angularJS1笔记-(6)-自定义过滤器
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- [Java] JSP笔记 - Filter 过滤器
一.什么是Web过滤器 Servlet API 很久以前就已成为企业应用开发的基石,而 Servlet 过滤器则是对 J2EE 家族的相对较新的补充. Servlet 过滤器是可插入的 Web 组件, ...
- 学习笔记_过滤器应用_1（分ip统计网站的访问次数）
分ip统计网站的访问次数 ip count 192.168.1.111 2 192.168.1.112 59 统计工作需要在所有资源之前都执行,那么就可以放到Filter中了. 我们这个过滤器不打算做 ...
- Java_Web学习笔记_过滤器应用案例（解决全站字符乱码）
解决全站字符乱码(POST和GET中文编码问题) servlet: l POST:request.setCharacterEncoding(“utf-8”); l GET: String user ...
- 学习笔记_过滤器详细_2（过滤器JavaWeb三大组件之一）
过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...
- 学习笔记_过滤器详细（过滤器JavaWeb三大组件之一）
过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l) init(FilterConfig):在服务器启动时会创建Filte ...
- 学习笔记_过滤器概述（过滤器JavaWeb三大组件之一）
过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...
- JavaWeb学习笔记九 过滤器、注解
过滤器Filter filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 步骤: 编写一个过滤器的类实现Filter接口 实现接口中尚未实现的 ...
- HBase笔记6 过滤器
过滤器 过滤器是GET或者SCAN时过滤结果用的,相当于SQL的where语句 HBase中的过滤器创建后会被序列化,然后分发到各个region server中,region server会还原过滤器 ...
随机推荐
- JavaWeb基础—上传与下载
1.上传(不能使用BaseServlet): 上传的作用,略 上传的要求(对表单和Servlet都有要求): 1.必须使用表单,而不能是超链接,method="post" 文件明显 ...
- 图解SSH原理
1. 初见SSH SSH是一种协议标准,其目的是实现安全远程登录以及其它安全网络服务. SSH仅仅是一协议标准,其具体的实现有很多,既有开源实现的OpenSSH,也有商业实现方案.使用范围最广泛的当然 ...
- Form,tagName和nodeName的区别
首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2&g ...
- Maven+spring+springMVC+mybatis+Junit+Log4j配置个人总结
首先粘贴上项目引用地址:http://doc.okbase.net/fengshizty/archive/126397.html 这里对创建步骤不做过多解释,只是针对案例创建demo的一些 ...
- Altium 中异形焊盘异形封装的创建图文教程
Altium 中异形焊盘异形封装的创建图文教程 一般不规则的焊盘被称为异型焊盘,典型的有金手指.大型的器件焊盘或者板子上需要添加特殊形状的铜箔(可以制作一个特殊封装代替). 如图27所示,此处我们以一 ...
- charles抓包https/模拟弱网/设置断点重定向/压测
charles几个常用功能 1,ios 抓包https网页:(如未配置,会显示unknown) 第一步是:给手机安装SSL证书 手机和电脑在同一wifi下,手机wifi配置http代理,ip是电脑 ...
- Java中final与 static final 修饰的常量的区别
喵喵开车,新手上路,多多关照.有任何错误请在评论区指出. ...........................................我是万恶的分界线( • ̀ω•́ )✧......... ...
- Intellij IDEA创建maven项目无java文件问题
在idea开发工具中创建工程时,点击右键没有创建包.接口.java类的提示, 如图: 解决之前的项目目录为: 针对这种情况,对idea开发工具做以下设置. 选择File->Project Str ...
- 学习python,第五篇
Python中%r和%s的详解及区别 %r用rper()方法处理对象%s用str()方法处理对象 有些情况下,两者处理的结果是一样的,比如说处理int型对象. 例一: print "I am ...
- 2019第十届蓝桥杯 E题 迷宫
/*输入 30 50 01010101001011001001010110010110100100001000101010 00001000100000101010010000100000001001 ...