angular学习input输入框筛选
学习angular，看到 angular-phonecat测试用例，照着教程运行了一遍，对于初学者有点不是很理解angular 帅选代码的意思，于是找教材，参考资料，明白了input筛选原来这么简单。
html部分
<!doctype html>
<html lang="en" ng-app="listModule">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/angular.js"></script>
<script src="js/controller.js"></script>
<title>筛选</title>
</head>
<body>
<div class="container" ng-controller="listCtrl">
<div class="panel panel-default">
<div class="panel-heading">input筛选</div>
<div class="panel-body">
<div class="row">
<!--左侧筛选-->
<div class="col-md-3">
<!--按钮组筛选-->
<div class="btn-group btn-group-justified form-group">
<div class="btn-group" ng-repeat="tab in listtab" ng-click="clicktab(tab.sex)">
<button type="button" class="btn btn-default">{{tab.sex}}</button>
</div>
</div>
<!--input筛选-->
<div class="form-group">
<input type="text" class="form-control" ng-model="text">
</div>
<!--下拉列表筛选-->
<div class="form-group">
<select ng-model="orderlist" class="form-control">
<option value="price">价格</option>
<option value="sex">sex</option>
</select>
</div>
</div>
<!--右侧展示内容-->
<div class="col-md-9">
<div class="tab thumbnail" ng-repeat="product in list | filter:text | orderBy:orderlist | filter:filtertab">
<h4 class="text-danger">{{product.price | currency:"￥"}}</h4>
<h3 class="text">{{product.name}}</h3>
<p class="text-info">{{product.describe}}</p>
</div>
</div>
</div>
</div>
</div>
</div> </body>
</html>
html里边的几个重点是过滤这款
1.filter:text， text是左侧input输入内容这块，ng-model="text";angular自动的就筛选内容；
2.orderBy:orderlist,AngularJS中orderBy进行排序,详细内容参考：http://www.cnblogs.com/freshcoder/p/4966375.html，
orderlist是左侧下拉列表，下拉列表所选择的的值，值是与右侧json里的要相同，才能进行排序
3.filter:filtertab ,自定义过滤器，筛选的内容也是两个json里共有的。
controller.js
var app = angular.module('listModule',[]);
app.controller('listCtrl',function($scope,$http){
$scope.orderlist = 'price';//下拉列表默认选中价格，默认是以价格排序的
$http.get('data/list-tab.json').success(function(tab){//按钮组
$scope.listtab = tab;
});
$http.get('data/list.json').success(function(list){//商品列表
$scope.list = list;
});
// 点击导航条保存商品种类
$scope.clicktab = function(sex){
$scope.showsex=sex;
};
// 设置过滤器
$scope.filtertab=function(product){
// 这里相当于给全局变量赋值，product.sex ng-repeat循环出来的
return $scope.showsex==product.sex || $scope.showsex==null;
}
})
这里的js比较简单主要的angular都已经给封装好了，
两个json内容
[
{"id":"","sex":"男装"},
{"id":"","sex":"女装"},
{"id":"","sex":"童装"}
] [
{"price":"33.45","name":"GXG男装 冬装新品毛衣90%白鸭绒轻薄羽绒拼接针织衫毛衫", "describe":"GXG官方旗舰店","sex":"男装"},
{"price":"","name":"韩版秋冬时尚修身显瘦连帽小棉袄","describe":"泉山亿井旗舰店","sex":"女装"},
{"price":"46.4","name":"一贝皇城男童小孩儿童中大童冬装","describe":"一贝皇城官方旗舰店","sex":"童装"},
{"price":"43.45","name":"军旅式外套(MA-1)(仿皮)", "describe":"优衣库官方旗舰店","sex":"男装"},
{"price":"","name":"太平鸟秋冬宽松半高领插肩袖套头卫衣","describe":"太平鸟官方旗舰店","sex":"女装"},
{"price":"53.4","name":"男童加厚冬季儿童中大童棉袄","describe":"玖玖苏荣旗舰店","sex":"童装"}
]
最后截取两张效果：
angular学习input输入框筛选的更多相关文章
- 在CS代码页获取input输入框内肉----.net学习点滴
想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...
- 【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
- Angular学习
一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- FastAdmin 开发学习给输入框加上清除功能
FastAdmin 开发学习给输入框加上清除功能 在社区上有小伙伴询问如果给输入框加上清除功能,因为有时修重新搜索时需要将输入框的内容快速清除,所以这个功能对用户非常友好. 如上图所示这种. 我看了一 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
随机推荐
- 解决Android与服务器交互大容量数据问题
对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来自服务器的大容量数据,那么就不得不考虑客户的流量问题.本文根据笔者的一个项目实战经验出发,解决 ...
- 亿级Web系统搭建——单机到分布式集群
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...
- Struts2下载文件点取消出现的异常解决
struts2点击下载,如果正常下载不会报错,可是如果点击取消就会报如下的错误: Java.lang.IllegalStateException: Cannot call sendError() af ...
- qq
引用:http://blog.sina.com.cn/s/blog_9e2e84050101blqz.html 腾讯QQ使用何种开发平台? 腾讯QQ的开发分客户端软 ...
- vue.js 渲染完成回调
vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...
- java加法流程图
- [Java Web]Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors
手机客户端向服务器提交Http请求时,Tomcat抛出错误: 十二月 31, 2014 2:32:45 下午 org.apache.coyote.http11.AbstractHttp11Proces ...
- daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...
- xcode8+iOS10问题
.xcode升级到8.0后打印的问题 ()xcode8会打印一些莫名其妙的log 解决方法:Scheme里面添加OS_ACTIVITY_MODE ＝ disable ()xcode8打印log不完整 ...
- SSO单点登录Spring-Security & CAS使用手册
1.1概述 1.1.1单点登录介绍 单点登录(Single Sign On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户只需要登录一次就可 ...