在angularJS中設置過濾器值

Question

我的請求頁面上有三個按鈕。打開，關閉和全部。現在當我默認打開頁面時，它顯示'全部'請求。但我想將其更改爲「打開」請求。當有人打開頁面時，他們應該看到打開請求的項目列表。下面我的代碼：

<div class="container"> 
    <div class="row row-offcanvas row-offcanvas-right"> 

     <div class="col-xs-12 col-sm-9"> 
      <div class="myRequests" ng-show="ticketList" ng-hide="SRDetails"> 

       <div class="row" ng-repeat="sr in SRItems | filter:{status: requestStatus}"> 
        <div class="panel panel-default {{sr.status}}"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           {{sr.number}}<a class="pull-right" ng-click="rotateArrow($index); togglePanel($index)" aria-expanded="false"><i id="arrow{{$index}}" class="arrow fa fa-angle-double-down {{$index | initialArrow}}" aria-hidden="true"></i></a> 
          </h4> 
         </div> 
         <div id="collapseR{{$index}}" class="panel-collapse collapse {{$index | ariaExpand}}" aria-expanded="false"> 
          <div class="panel-body"> 
           <div class="row"> 
            <div class="col-md-3 pace"> 
             <p><b>Recipient:</b> {{sr.caller}}</p> 
             <p><b>Ordered:</b> {{sr.opened}}</p> 
             <p><b>State:</b> <button class="btn btn-default">{{sr.state}}</button></p> 
            </div> 
            <div class="col-md-9" style="border-left: 1px solid #eee"> 

             <p><a ng-click="showSRDetail(sr.initialIndex)">View More Details</a></p> 
             <p> 
              <div class="row"> 
               <div class="col-md-3" align="center"> 
                <i class="fa fa-users" aria-hidden="true" style="font-size: 100px;padding: 10px;" /> 
               </div> 
               <div class="col-md-5 pace"> 
                <p><b>Priority:</b> {{sr.priority}}</p> 
                <hr/> 
                <!-- <button class="btn btn-{{IncItem.state | IncState}}">{{inc.state}}</button> --> 
               </div> 
              </div> 
             </p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div>     
      </div> 
     </div> 
     <!--/.col-xs-12.col-sm-9--> 

     <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> 
      <div class="panel panel-default" ng-show="SRFilter"> 
       <div class="panel-body"> 
        <button class="btn btn-default" ng-click="filterReq('open')">Open</button> 
        <button class="btn btn-default" ng-click="filterReq('closed')">Closed</button> 
        <button class="btn btn-default" ng-click="filterReq('all')">All</button> 
       </div> 
      </div> 
     </div> 
     <!--/.sidebar-offcanvas--> 
    </div> 
    <!--/row--> 

    <hr/> 

</div> 

控制器代碼中的ServiceNow：

var glideAjax = 'ITPortalUtil4'; 
var isIE9or10 = (isMSIE9 || navigator.userAgent.indexOf("MSIE 10") != -1) ? true : false; 

var $jq = jQuery.noConflict(); 
/*** Angular JS Specific Code ***/ 

var itpApp = angular.module("itpApp",['ngRoute']); 

itpApp.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
     controller: 'itpAppController' 
    }); 
}); 


// Angular JS Filters 
itpApp.filter('reqState', function() { 
    return function(reqState) { 
     if(reqState != "" && reqState != undefined) { 
      if(reqState == "Open") 
       return "info"; 
      else if(reqState == "Reopened") 
       return "info"; 
      else if(reqState == "Work in Progress") 
       return "primary"; 
      else if(reqState == "On Hold") 
       return "warning"; 
      else if(reqState == "Pending") 
       return "warning"; 
      else if(reqState == "Closed Incomplete") 
       return "danger"; 
      else if(reqState == "Closed Complete") 
       return "success"; 
      else { 
       return "default"; 
      } 
     } else { 
      return "default"; 
     } 
    } 
}); 

itpApp.filter('ariaExpand', function() { 
    return function(index) { 
     if(index != undefined) { 
      if(index == 0) 
       return "in"; 
      else 
       return ""; 
     } else { 
      return ""; 
     } 
    } 
}); 

itpApp.filter('initialArrow', function() { 
    return function(index) { 
     if(index != undefined) { 
      if(index == 0) 
       return "rotate"; 
      else 
       return ""; 
     } else { 
      return ""; 
     } 
    } 
}); 



// Angular JS Controller - Main 

itpApp.controller("itpAppController", function($scope, $filter) { 

    //Global Variables 
    $scope.SRItems = []; 
    $scope.requestStatus = ""; 
    $scope.itemIndex = 0; 
    $scope.comments = []; 
    $scope.commentDetail = []; 
    var SRComm = []; 
    var SRCommDetail = []; 
    $scope.SRDetails = false; 
    $scope.ticketList = true; 
    $scope.SRFilter = true; 

    var gaSRItems = new GlideAjax(glideAjax); 
    gaSRItems.addParam('sysparm_name','getServiceReqs'); 
    gaSRItems.getXML(function(response) { 
     $scope.answer = response.responseXML.documentElement.getAttribute("answer"); 
     $scope.SRItems = JSON.parse($scope.answer); 
     SRComm = []; 
     SRCommDetail = []; 
     for(var i=0; i < $scope.SRItems.length; i++) { 
      //Add new attribute in array reqItems 
      $scope.SRItems[i].initialIndex = i; 
      //Set Status for each record based on its state 
      if($scope.SRItems[i].state != "" && $scope.SRItems[i].state != undefined) { 
       if($scope.SRItems[i].state == "Closed Complete") 
        $scope.SRItems[i].status = "closed"; 
       else if($scope.SRItems[i].state == "Closed Complete") 
        $scope.SRItems[i].status = "closed"; 
       else if($scope.SRItems[i].state == "Soft Closed") 
        $scope.SRItems[i].status = "closed"; 
       else { 
        $scope.SRItems[i].status = "open"; 
       } 
      } else { 
       $scope.SRItems[i].status = ""; 
      } 
     $scope.$apply(); 
    }); 


    // Rotate the Section Arrow. 
    $scope.rotateArrow = function(index) { 
     //gs.log('Rotate arroqw: ' +index); 
     angular.element("#arrow" + index).toggleClass("rotate"); 
    } 

    // Set filter based on button click. 
    $scope.filterReq = function(btnValue) { 
     if(btnValue == "open") { 
      $scope.requestStatus = "open"; 
     } else if(btnValue == "closed") { 
      $scope.requestStatus = "closed"; 
     } else { 
      $scope.requestStatus = ""; 
     } 
    } 

    //Show RITM details 
    $scope.showSRDetail = function(index) { 
     $scope.itemIndex = index; 
     $scope.SRDetails = true; 
     $scope.ticketList = false; 
     $scope.SRFilter = false; 
    } 

    $scope.goBack = function() { 
     $scope.SRDetails = false; 
     $scope.ticketList = true; 
     $scope.SRFilter = true; 
    } 

    // tooglePanel 
    $scope.togglePanel = function(index) { 
     //gs.log('Toggle PAnel: ' +index); 
     $jq("#collapseR" + index).collapse('toggle'); 
    } 

}); 

Answer 1

初始化你的過濾器的值與 「開放」 在你的控制器定義的開始：

$scope.requestStatus = "open";