本帖最后由 谷粒姐姐 于 2018-9-20 11:34 编辑
过滤条件构建 6.1 需求分析点击搜索面板上的分类、品牌和规格，实现查询条件的构建。查询条件以面包屑的形式显示。当面包屑显示分类、品牌和规格时，要同时隐藏搜索面板对应的区域。 用户可以点击面包屑上的 X 撤销查询条件。撤销后显示搜索面包相应的区域。
6.2 添加搜索项 6.2.1 添加搜索项方法 修改 pinyougou-search-web 的 searchController.js [AppleScript] 纯文本查看 复制代码 $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 ，为搜索面板添加点击事件 点击商品分类标签 [AppleScript] 纯文本查看 复制代码 <a href="#" ng-click="addSearchItem('category',category)">{{category}}</a>点击品牌标签 [AppleScript] 纯文本查看 复制代码 < a href="#" ng-click="addSearchItem('brand',brand.text)">{{brand.text}}</ a>[img=7,31]点击规格标签 [AppleScript] 纯文本查看 复制代码 < a href="#" ng-click="addSearchItem(spec.text,pojo.optionName)">
{{pojo.optionName}}</a>6.1.1 显示面包屑 [img=14,24]修改 pinyougou-search-web 的 search.html，用面包屑形式显示搜索条件 [AppleScript] 纯文本查看 复制代码 <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 [AppleScript] 纯文本查看 复制代码 //移除复合搜索条件
$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 [AppleScript] 纯文本查看 复制代码 < 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 [AppleScript] 纯文本查看 复制代码 <div class="type-wrap" ng-if="resultMap.categoryList!=null && searchMap.category==''">
<div class="fl key">商品分类</div>
......
</div> 6.4.1 隐藏品牌面板 修改 search.html [AppleScript] 纯文本查看 复制代码 <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 [AppleScript] 纯文本查看 复制代码 <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 在添加和删除筛选条件时自动调用搜索方法 [AppleScript] 纯文本查看 复制代码 //添加复合搜索条件
$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();//执行搜索
}
| 
收藏
淘帖
踩
