Question

我的请求页面上有三个按钮。打开，关闭和全部。现在，当我默认打开页面时，它显示的是“所有＆＃39;请求。但是我想将其更改为“打开”＃39;请求。当有人打开页面时，他们应该看到打开的请求项目列表。在我的代码下面：

<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

使用＆＃34;打开＆＃34;初始化过滤器的值在控制器定义的开头：

$scope.requestStatus = "open";

以angularJS

1 个答案: