学习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":"001","sex":"男装"},
{"id":"002","sex":"女装"},
{"id":"002","sex":"童装"}
]
[
{"price":"33.45","name":"GXG男装 冬装新品毛衣90%白鸭绒轻薄羽绒拼接针织衫毛衫", "describe":"GXG官方旗舰店","sex":"男装"},
{"price":"34","name":"韩版秋冬时尚修身显瘦连帽小棉袄","describe":"泉山亿井旗舰店","sex":"女装"},
{"price":"46.4","name":"一贝皇城男童小孩儿童中大童冬装","describe":"一贝皇城官方旗舰店","sex":"童装"},
{"price":"43.45","name":"军旅式外套(MA-1)(仿皮)", "describe":"优衣库官方旗舰店","sex":"男装"},
{"price":"45","name":"太平鸟秋冬宽松半高领插肩袖套头卫衣","describe":"太平鸟官方旗舰店","sex":"女装"},
{"price":"53.4","name":"男童加厚冬季儿童中大童棉袄","describe":"玖玖苏荣旗舰店","sex":"童装"}
]
最后截取两张效果：
时间： 2024-09-30 07:36:30