angularJS——高级筛选
1.效果图
2.前台代码
<ons-scroller class="hlyw-bg-seek" ng-class="{'isIOStop':isIOS}">
<div class="hlyw-filtrate-bt">分公司</div>
<div class="hlyw-filtrate-bt-an-d">
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.partyGroupId==deptCode}" ng-click="chooseChargeParam('partyGroupId',deptCode)">全部</div>
<div class="hlyw-filtrate-bt-an" ng-repeat="item in childCompanyInfos" ng-class="{'hlyw-gjsx-true':screenParam.partyGroupId==item.deptCode}" ng-click="chooseChargeParam('partyGroupId',item.deptCode)">{{item.deptName}}</div>
</div>
<div class="hlyw-filtrate-bt">电压等级</div>
<div class="hlyw-filtrate-bt-an-d">
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel==''}" ng-click="chooseChargeParam('voltLevel','')">全部</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='07'}" ng-click="chooseChargeParam('voltLevel','07')">6kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='08'}" ng-click="chooseChargeParam('voltLevel','08')">10kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='09'}" ng-click="chooseChargeParam('voltLevel','09')">20kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='10'}" ng-click="chooseChargeParam('voltLevel','10')">35kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='12'}" ng-click="chooseChargeParam('voltLevel','12')">110kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='13'}" ng-click="chooseChargeParam('voltLevel','13')">220kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='14'}" ng-click="chooseChargeParam('voltLevel','14')">330kV</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.voltLevel=='OTHER'}" ng-click="chooseChargeParam('voltLevel','OTHER')">其他</div>
</div>
<div class="hlyw-filtrate-bt">用电类别</div>
<div class="hlyw-filtrate-bt-an-d">
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType==''}" ng-click="chooseChargeParam('elecType','')" >全部</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='100'}" ng-click="chooseChargeParam('elecType','100')">大工业用电</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='200'}" ng-click="chooseChargeParam('elecType','200')">普通工业</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='260'}" ng-click="chooseChargeParam('elecType','260')">非工业</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='300'}" ng-click="chooseChargeParam('elecType','300')">商业</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='500'}" ng-click="chooseChargeParam('elecType','500')">居民生活</div>
<div class="hlyw-filtrate-bt-an" ng-class="{'hlyw-gjsx-true':screenParam.elecType=='OTHER'}" ng-click="chooseChargeParam('elecType','OTHER')">其他</div>
</div>
</ons-scroller>
<div class="hlyw-filtrate-bottom">
<div class="hlyw-filtrate-bottom-L" ng-click="chooseReset()" >恢复默认</div>
<div class="hlyw-filtrate-bottom-R">
<div class="hlyw-filtrate-button" ng-click="chooseTRUE($event)">确定</div>
</div>
</div>
3.控制器代码
$scope.chooseChargeParam = function(paramType,paramValue){
if(paramType=='partyGroupId'){
var oriValue = $scope.screenParam[paramType];//原有选择数据
if(oriValue==paramValue){
$scope.screenParam[paramType]=$scope.deptCode;
}else{
$scope.screenParam[paramType]=paramValue;
}
}else{
var oriValue = $scope.screenParam[paramType];//原有选择数据
if(oriValue==paramValue){
$scope.screenParam[paramType]='';
}else{
$scope.screenParam[paramType]=paramValue;
}
}
};
//恢复默认
$scope.chooseReset = function() {
$scope.screenParam = {
partyGroupId: $scope.deptCode,
'voltLevel': '',
'elecType': ''
};
};
//点击确定跳转列表页
$scope.chooseTRUE= function($event) {
//防止多次点击
var btn = angular.element($event.target);
btn.attr('disabled','disabled');
$scope.$evalAsync();
mainNavi.replacePage($scope.baseUrl+"pagesV2/enterpreneur/filtrateEnterpriseList.html",{screenParam:$scope.screenParam,onTransitionEnd:function(){
btn.removeAttr('disabled');
$scope.$evalAsync();
}});
}