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的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
随机推荐
- 19.在HTTP 1.0中,状态码401的含义是(?);如果返回“找不到文件”的提示,则可用 header 函数,其语句为(?)写出http常见的状态码和含义,至少5个.[完善题目]
状态401代表未被授权,header("Location:www.xxx.php"); 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300 ...
- 4. 什么是AJAX
术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步.Ajax提供与服务器 ...
- 最简单的推送--uexGetui
个推插件使用指南 配置方法这里不再复述,详情请参见插件接入指引 怎样创建一个最简单的推送? //只需要两个方法 uexGetui.initialize(data); uexGetui.onInitia ...
- CEGUI0.8.4引入到自己工程中
首先要确定你的CEGUI已经完全编译好,若未进行这一步请参照http://www.cnblogs.com/wenguang1996/p/5027522.html 打开VS2012新建C++工程,然后添 ...
- 分布式入门之2:Quorum机制
1. 全写读1(write all, read one) 全写读1是最直观的副本控制规则.写时,只有全部副本写成功,才算是写成功.这样,读取时只需要从其中一个副本上读数据,就能保证正确性. 这种规则 ...
- LINUX+Vmware+SVN的配置和安装
LINUX+Vmware+SVN的配置和安装 验证SVN安装了没有 svnserve --version 查看CentOS自带JDK是否已安装. ◆输入:yum list installed |gre ...
- 零成本实现Web性能测试:基于Apache JMeter
http://book.51cto.com/art/201204/327301.htm
- ADB简单基础命令
1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...
- dm9000c 移值新内核 linux-4.1.24
错误 1 /home/dm9000/dm9dev9000c.c:309: error: conflicting types for 'phy_read'include/linux/phy.h:637: ...
- JSON对象转换问题
今天调用别人接口遇到一个问题,原本约定的data格式为:JSON字符串,但本次返回了一个空字符串"", 大概是这样的 字符串类型的httpResult.data值为字result: ...