学习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输入框筛选的更多相关文章

  1. 在CS代码页获取input输入框内肉----.net学习点滴

    想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...

  2. 【转】Angular学习总结--很详细的教程

    *这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...

  3. Angular学习

    一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...

  4. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  5. FastAdmin 开发学习给输入框加上清除功能

    FastAdmin 开发学习给输入框加上清除功能 在社区上有小伙伴询问如果给输入框加上清除功能,因为有时修重新搜索时需要将输入框的内容快速清除,所以这个功能对用户非常友好. 如上图所示这种. 我看了一 ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  9. Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

随机推荐

  1. 19.在HTTP 1.0中,状态码401的含义是(?);如果返回“找不到文件”的提示,则可用 header 函数,其语句为(?)写出http常见的状态码和含义,至少5个.[完善题目]

    状态401代表未被授权,header("Location:www.xxx.php"); 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300 ...

  2. 4. 什么是AJAX

    术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步.Ajax提供与服务器 ...

  3. 最简单的推送--uexGetui

    个推插件使用指南 配置方法这里不再复述,详情请参见插件接入指引 怎样创建一个最简单的推送? //只需要两个方法 uexGetui.initialize(data); uexGetui.onInitia ...

  4. CEGUI0.8.4引入到自己工程中

    首先要确定你的CEGUI已经完全编译好,若未进行这一步请参照http://www.cnblogs.com/wenguang1996/p/5027522.html 打开VS2012新建C++工程,然后添 ...

  5. 分布式入门之2:Quorum机制

    1.  全写读1(write all, read one) 全写读1是最直观的副本控制规则.写时,只有全部副本写成功,才算是写成功.这样,读取时只需要从其中一个副本上读数据,就能保证正确性. 这种规则 ...

  6. LINUX+Vmware+SVN的配置和安装

    LINUX+Vmware+SVN的配置和安装 验证SVN安装了没有 svnserve --version 查看CentOS自带JDK是否已安装. ◆输入:yum list installed |gre ...

  7. 零成本实现Web性能测试:基于Apache JMeter

    http://book.51cto.com/art/201204/327301.htm

  8. ADB简单基础命令

    1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...

  9. dm9000c 移值新内核 linux-4.1.24

    错误 1 /home/dm9000/dm9dev9000c.c:309: error: conflicting types for 'phy_read'include/linux/phy.h:637: ...

  10. JSON对象转换问题

    今天调用别人接口遇到一个问题,原本约定的data格式为:JSON字符串,但本次返回了一个空字符串"", 大概是这样的 字符串类型的httpResult.data值为字result: ...