按角度中的特定类型过滤数组列表答案

【问题标题】：Filter the list of an array by specific types in angular按角度中的特定类型过滤数组列表
【发布时间】：2019-12-12 15:02:39
【问题描述】：

Raj:merman: 10:49 PM
{
  "statusType":"success",
  "statusMsg":{
     "approvals":{
        "inProgress":[
           {
              "projectStatus":"Pending Decision",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-05-24 09:41:36",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "projectName":"Mobile Test - Jack - POR 1",
              "priority":"NORMAL",
              "projectId":23351
           },
           {
              "projectStatus":"Pending Decision",
              "pcbu":"NKSMO,NNOWR",
              "statusUpdatedDate":"2019-07-31 15:04:30",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "projectName":"TEST POR CAHNGE REQ",
              "priority":"NORMAL",
              "projectId":24324
           }
        ],
        "draft":[
        ],
        "completed":[
           {
              "projectStatus":"Declined",
              "pcbu":"NKSMO,NHQIR",
              "statusUpdatedDate":"2019-07-08 12:27:16",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"POR : mobile 1:1 testing 01",
              "completeUpdatedDate":"07/08/2019",
              "requestorName":"Upadhyay,Viraj",
              "priority":"NORMAL",
              "projectId":23918
           },
           {
              "projectStatus":"Completed",
              "pcbu":"NMTNR,NKSMO",
              "statusUpdatedDate":"2019-05-14 14:35:41",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR - 2",
              "completeUpdatedDate":"05/14/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23258
           },
           {
              "projectStatus":"Declined",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-07-17 14:20:27",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"por mobile test",
              "completeUpdatedDate":"07/17/2019",
              "requestorName":"Upadhyay,Viraj",
              "priority":"NORMAL",
              "projectId":24081
           },
           {
              "projectStatus":"Declined",
              "pcbu":"NKSMO,NNCNV",
              "statusUpdatedDate":"2019-05-14 13:49:31",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR 1",
              "completeUpdatedDate":"05/14/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23254
           },
           {
              "projectStatus":"Completed",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-06-28 08:32:42",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR - F",
              "completeUpdatedDate":"06/28/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23871
           }
        ]
     }
  }
}

<div class="col-md-12 col-sm-12" >
<h3 class="projectFont no-margin queueStyling">Queue</h3>
<div class=" nopadding-bottom">
<div class="row">
<form class="form-inline">
<div class="col-md-12">
<div class="form-group margin-bottom-10" style="width: 100%;">
   <div class="input-group input-transparent-field" style="width: 25%;
      float: left;
      margin-right: 1%;
      margin-left: 4%;">
      <label for="search-" class="sr-only"> Search</label>
      <input type="text" id="requestInfoSearch" class="workflow-search-transparent-field form-control  border-none" placeholder="Search by Name or Requestor !!!!!!!" ng-model="workflowQueueSearch">
      <span class="input-group-btn"><button type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-search" ng-disabled="true"></span>
      </button>
      </span>
   </div>
   <label for="Type" class="control-label-left typeAllOptionStyling">Type</label>
   <div class="selecteddiv" style="margin-right: 1%;">
      <select ng-model="folderSearchType" name="folderSearchType" ng-options="obj.requestType for obj in inProgressDataList"></select>
   </div>
   <label for="PCBU" class="vz-control-label-left typeAllOptionStyling">PCBU</label>
   <div class="selecteddiv" style="margin-right: 1%;">
      <select ng-model="pcbuSelect" name="pcbuSelect" ng-options="obj.pcbu for obj in inProgressDataList"></select>
   </div>
   <label for="Requestor" class="vz-control-label-left typeAllOptionStyling">Requestor</label>
   <div class="selecteddiv" style="margin-right: 1%;">
      <select ng-model="requestorSelect" name="requestorSelect" ng-options="item for item in toUserList" ></select>
   </div>
   <label for="Status" class="vz-control-label-left typeAllOptionStyling">Status</label>
   <div class="selecteddiv" style="margin-right: 1%;">
      <select ng-model="projectStatusSelect" name="projectStatusSelect" ng-options="obj.projectStatus for obj in inProgressDataList"></select>
   </div>
   <button ng-click="clearAll()" style="color: #CD040B;
      font-size: 14px;
      font-family: nhg-text-bold,arial,sans-serif;
      position: absolute;
      margin-top: 4px!important;">Clear All</button>
</div>

列表的html：

<div class="panel panel-default">
<div class="panel-body noTopBottompadding">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12  nopadding" >
<div class="table-responsive workflow-home-table">
<table class="table nomargin priortyStyling" style="border:none">
<thead>
   <th class="searchPointer" ng-click="sortType = 'requestType'; sortReverse = !sortReverse">
      Request Type
      <span ng-if="sortType == 'requestType' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'requestType' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th  class="searchPointer"  ng-click="sortType = 'pcbu'; sortReverse = !sortReverse">
      PCBU
      <span ng-if="sortType == 'pcbu' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'pcbu' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th></th>
   <th class="searchPointer"  ng-click="sortType = 'projectName'; sortReverse = !sortReverse">
      Request Name
      <span ng-if="sortType == 'projectName' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'projectName' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th class="searchPointer"  ng-click="sortType = 'projectStatus'; sortReverse = !sortReverse">
      Status
      <span ng-if="sortType == 'projectStatus' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'projectStatus' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th></th>
   <th class="searchPointer"  ng-click="sortType = 'projectId'; sortReverse = !sortReverse">
      Request ID
      <span ng-if="sortType == 'projectId' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'projectId' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th  class="searchPointer" ng-click="sortType = 'statusUpdatedDate'; sortReverse = !sortReverse">
      Date
      <span ng-if="sortType == 'statusUpdatedDate' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'statusUpdatedDate' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
   <th  class="searchPointer" ng-click="sortType = 'statusUpdatedDate'; sortReverse = !sortReverse">
      Requestor
      <span ng-if="sortType == 'statusUpdatedDate' && sortReverse" class="fa fa-caret-down"></span>
      <span ng-if="sortType == 'statusUpdatedDate' && !sortReverse" class="fa fa-caret-up"></span>
   </th>
</thead>
<tbody class="priortyStyling">
   <tr ng-repeat="inProgressData in inProgressDataList | orderBy:sortType:sortReverse | filter:workflowQueueSearch | filter:projectStatusSelect | filter:requestorSelect | filter:folderSearchType | filter:pcbuSelect">
      <td>{{changeRequestType(inProgressData.requestType)}}</td>
      <td>{{inProgressData.pcbu}}</td>
      <td class="priortyStyling"  ng-if="inProgressData.priority == '' || inProgressData.priority == 'NORMAL'">
         <!-- <img src="images/homepage/Medium.png" width="20" height="20" alt="{{inProgressData.priority}}"> -->
      </td>
      <td class="priortyStyling" ng-if="inProgressData.priority == 'HIGH'">
         <img src="images/homepage/High.png" width="13" height="13" alt="{{inProgressData.priority}}">
      </td>
      <td><a href="#" target="_self" ng-click="onWorkFlowHomeSelection(inProgressData,'Inprogress')">{{inProgressData.projectName}}</a></td>
      <td>{{inProgressData.projectStatus}}</td>
      <td>{{inProgressData.projectDispachStatus}}</td>
      <td>{{inProgressData.projectId}}</td>
      <td>{{ formatDateAndTime(inProgressData.statusUpdatedDate) | date:'MM/dd/yyyy h:mm:ss a'}} CST</td>
      <td>{{projectData.requestAction.name}}</td>

我正在尝试按类型、PCBU、请求者和状态过滤请求列表，这些只是四个类别，所以我使用 ng-options 进行了几次选择，但在 ng 选项中，当我获取列表时它显示重复的类型作为动态，我附上了这两件事的截图。

我尝试制作类型列表，然后在 ng-options 中将其作为选项提供，但是类型太多，根据请求不应该包含某些类型。那么您能否告诉我如何仅显示这些特定列表中的选项，然后根据选项过滤列表。

我希望输出仅根据列表中的内容显示选项，然后根据下拉列表中的选定选项刷新列表。请帮忙，我做了一些研究，但结果却很挣扎。提前谢谢你。

【问题讨论】：

我在标题中阅读了过滤器 && 列表，但问题没有列表作为代码！
我期望 JSON 数据为如下代码：[{key:"value"},{key:"value"}] ectc
如何从 Image 中提取数据并尝试一些代码来找出问题所在？就代码而言，图像不是很好
从 JSON 中我认为最好将 approvals 作为单个数组并将 status 键作为 inProgress、'draft` 等。然后您可以轻松过滤数据。
我想过滤 $scope.inprogressdatalist 数组的显示元素。 products 是一个对象数组，包含一些具有自己类型的元素：pcbu 或请求状态。如果用户单击选择选项 pcbu 或键入，我只想过滤数组

标签： javascript arrays angularjs filter

【解决方案1】：

根据 UI，如果数据是 http 响应中的单个数组，您可以过滤数据。给出了样本输入和输出。如果这不是您要查找的内容，请提供更多信息。

var approvals = [
  {
              "projectStatus":"Pending Decision",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-05-24 09:41:36",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "projectName":"Mobile Test - Jack - POR 1",
              "priority":"NORMAL",
              "projectId":23351,
    		  "status": "inProgress"
           },
           {
              "projectStatus":"Pending Decision",
              "pcbu":"NKSMO,NNOWR",
              "statusUpdatedDate":"2019-07-31 15:04:30",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "projectName":"TEST POR CAHNGE REQ",
              "priority":"NORMAL",
              "projectId":24324,
    		  "status": "inProgress"
           },{
              "projectStatus":"Declined",
              "pcbu":"NKSMO,NHQIR",
              "statusUpdatedDate":"2019-07-08 12:27:16",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"POR : mobile 1:1 testing 01",
              "completeUpdatedDate":"07/08/2019",
              "requestorName":"Upadhyay,Viraj",
              "priority":"NORMAL",
              "projectId":23918,
    		  "status": "completed"
           },
           {
              "projectStatus":"Completed",
              "pcbu":"NMTNR,NKSMO",
              "statusUpdatedDate":"2019-05-14 14:35:41",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR - 2",
              "completeUpdatedDate":"05/14/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23258,
    		  "status": "completed"
           },
           {
              "projectStatus":"Declined",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-07-17 14:20:27",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"por mobile test",
              "completeUpdatedDate":"07/17/2019",
              "requestorName":"Upadhyay,Viraj",
              "priority":"NORMAL",
              "projectId":24081,
    		  "status": "completed"
           },
           {
              "projectStatus":"Declined",
              "pcbu":"NKSMO,NNCNV",
              "statusUpdatedDate":"2019-05-14 13:49:31",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR 1",
              "completeUpdatedDate":"05/14/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23254,
    		  "status": "completed"
           },
           {
              "projectStatus":"Completed",
              "pcbu":"NKSMO",
              "statusUpdatedDate":"2019-06-28 08:32:42",
              "requestType":"PORCHNGEREQ",
              "folderStatus":false,
              "requestedAmount":0,
              "projectName":"Mobile Test - POR - F",
              "completeUpdatedDate":"06/28/2019",
              "requestorName":"Inphouva,April",
              "priority":"NORMAL",
              "projectId":23871,
    		  "status": "completed"
           }
  ];
const completed  = approvals.filter(approval => approval.status == "completed");
const inProgress = approvals.filter(approval => approval.status == "inProgress");
const projectStatusPendingDecision = approvals.filter(approval => approval.projectStatus == "Pending Decision");
console.log("Completed items");
console.log(completed);
console.log("<======================================>");
console.log("In Progress items");

console.log(inProgress);
console.log("<======================================>");
console.log("project Status Pending Decision items");


console.log(projectStatusPendingDecision);

【讨论】：

嗨@krishnadas 这不能解决问题，如果可以，请更新答案！我想过滤 $scope.inprogressdatalist 数组的显示元素。 products 是一个对象数组，包含一些具有自己类型的元素：pcbu 或请求状态。如果用户单击选择选项 pcbu 或类型，我只想过滤数组。