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(); }}); }