按特定类型过滤数组列表
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 options中，当我获取列表时，它会显示重复的类型作为动态，我为这两件事都附上了截图。
我尝试过列出类型，然后在ng-options中将其作为选项提供，但是类型太多了，根据请求应该不包括某些类型。因此，您能告诉我如何仅显示那些特定列表中的选项，然后根据这些选项过滤列表。
我希望输出结果仅根据列表中的内容显示选项，然后根据下拉菜单中的所选选项刷新列表。请帮忙，我做了一些研究，但结果很挣扎。 预先谢谢你。
1 个答案:
答案 0 :(得分：0)
根据用户界面，如果数据是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);
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？