过滤条件构建
6.1 需求分析
点击搜索面板上的分类、品×××和规格，实现查询条件的构建。查询条件以面包屑的形式显示。当面包屑显示分类、品×××和规格时，要同时隐藏搜索面板对应的区域。
用户可以点击面包屑上的 X 撤销查询条件。撤销后显示搜索面包相应的区域。
6.2 添加搜索项
6.2.1 添加搜索项方法
修改 pinyougou-search-web 的 searchController.js
$scope.searchMap={'keywords':'','category':'','brand':'','spec':{}};//搜索对象
//添加搜索项
$scope.addSearchItem=function(key,value){
if(key=='category' || key=='brand'){//如果点击的是分类或者是品×××
$scope.searchMap[key]=value;
}else{
$scope.searchMap.spec[key]=value;
}
}6.1.1 点击搜索项
修改 pinyougou-search-web 的 search.html ，为搜索面板添加点击事件
点击商品分类标签
<a href="#" ng-click="addSearchItem('category',category)">{{category}}</a>
点击品×××标签
< a href="#" ng-click="addSearchItem('brand',brand.text)">{{brand.text}}</ a>
[img=7,31]点击规格标签< a href="#" ng-click="addSearchItem(spec.text,pojo.optionName)">
{{pojo.optionName}}</a>6.1.1 显示面包屑
[img=14,24]修改 pinyougou-search-web 的 search.html，用面包屑形式显示搜索条件
<ul class="fl sui-breadcrumb">搜索条件：</ul>
<ul class="tags-choose">
<li class="tag" ng-if="searchMap.category!=''">商品分类：{{searchMap.category}}<i class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-if="searchMap.brand!=''">品×××：{{searchMap.brand}}<i class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-repeat="(key,value) in searchMap.spec">{{key}}:{{value}}<i class="sui-icon icon-tb-close"></i></li>
</ul>6.3 撤销搜索项
6.3.1 撤销搜索项的方法
修改 pinyougou-search-web 工程 searchController.js
//移除复合搜索条件
$scope.removeSearchItem=function(key){
if(key=="category" || key=="brand"){//如果是分类或品×××
$scope.searchMap[key]="";
}else{//否则是规格
delete $scope.searchMap.spec[key];//移除此属性
}
}6.3.1 页面调用方法
pinyougou-search-web 工程的 search.html
< ul class="tags-choose">
<li class="tag" ng-if="searchMap.category!=''"
ng-click="removeSearchItem('category')">商品分类：{{searchMap.category}}<i class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-if="searchMap.brand!=''" ng-click="removeSearchItem('brand')">
品×××：{{searchMap.brand}}<i class="sui-icon icon-tb-close"></i></li>
<li class="tag" ng-repeat="(key,value) in searchMap.spec"
ng-click="removeSearchItem(key)">{{key}}:{{value}}<i class="sui-icon icon-tb-close"></i></li>
</ul>
6.4 隐藏查询面板6.4.1 隐藏分类面板
修改 search.html
<div class="type-wrap" ng-if="resultMap.categoryList!=null && searchMap.category==''">
<div class="fl key">商品分类</div>
......
</div>6.4.1 隐藏品×××面板
修改 search.html
<div class="type-wrap logo" ng-if="resultMap.brandList!=null && searchMap.brand==''">
<div class="fl key brand">品×××</div>
.......
</div>6.4.1 隐藏规格面板
[img=20,24]修改 search.html
<div class="type-wrap" ng-repeat="spec in resultMap.specList"
ng-if="searchMap.spec[spec.text]==null">
<div class="fl key">{{spec.text}}</div>
......
</div>提交查询
修改 searchController.js 在添加和删除筛选条件时自动调用搜索方法
//添加复合搜索条件
$scope.addSearchItem=function(key,value){
if(key=="category" || key=="brand"){//如果是分类或品×××
$scope.searchMap[key]=value;
}else{//否则是规格
$scope.searchMap.spec[key]=value;
}
$scope.search();//执行搜索
}
//移除复合搜索条件
$scope.removeSearchItem=function(key){
if(key=="category" || key=="brand"){//如果是分类或品×××
$scope.searchMap[key]="";
}else{//否则是规格
delete $scope.searchMap.spec[key];//移除此属性
}
$scope.search();//执行搜索
}