angularJS——高级筛选

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