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