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会还原过滤器 ...
随机推荐
- 【转】使用nginx搭建高可用，高并发的wcf集群
原文:http://www.cnblogs.com/huangxincheng/p/7707830.html 很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk ...
- 双系统IOS\windows7 换成Windows10后果
昨天将双系统IOS 和Windows7 换成了Windows10后 发现原来在IOS盘"E"盘下面的文件都不显示了,而且盘符都打不开,那叫一个着急啊,开发项目的代码全在那个盘符里面 ...
- UOJ UR#9 App管理器
题目传送门 题目大意大概就是给你一个混合图(既有有向边又有无向边),对于每条无向边,u-v,问删去u->v,或删去v->u那条可以使新图强连通.(保证数据有解). 这道题前几个数据点送分. ...
- sklearn常见分类器的效果比较
sklearn 是 python 下的机器学习库. scikit-learn的目的是作为一个“黑盒”来工作,即使用户不了解实现也能产生很好的结果. 其功能非常强大,当然也有很多不足的地方,就比如说神经 ...
- Qt 利用XML文档，写一个程序集合 四
接上一篇https://www.cnblogs.com/DreamDog/p/9214067.html 启动外部程序 这里简单了,直接上代码吧 connect(button,&MPushBut ...
- 自动化jenkins报：ModuleNotFoundError: No module named 'common'
直接执行脚本是没有问题,报如下错误: 你已经在run.py脚本加路径了为什么还会报这个错呢,就是你加的路径,应该在所有的包上面,才不会报这个错,如下: 注:以下是我的解决方法仅作参考.如果我的发表的内 ...
- c语言数字图像处理（四）：灰度变换
灰度变换 灰度变换函数 s = T(r) 其中r为输入图像在(x, y)点处的灰度值,s为输出图像在(x, y)点处的灰度值 灰度变换的作用 上图所示的两幅T(s)函数的图像曲线,第一幅图可以增强 ...
- python—启动自带shell时报错（丢失api-ms-win-crt-runtime-l1-1-0.dll)已解决
备注: 有的伙伴安装完1后重启,问题可以解决,summer儿在安装完1依然未能解决,于是又进行了2的安装再次重启后问题解决!! 1,安装vc-redist.x64,微软官网搜索免费下载,安装后重启. ...
- 什么是mvc模式
MVC是一个架构,或者说是一个设计模式,它就是强制性使应用程序的输入,处理和输出分开.将一个应用程序分为三个部分:Model,View,Controller. 原理图: 分析: Model 模型(完成 ...
- Windows 本地文件搜索神器
Wox: Windows 本地文件搜索神器 下载地址: https://github.com/Wox-launcher/Wox 注: Wox只能搜索C盘下的文件,所以需要结合everything 如果 ...