[英]How to filter objects based on value of key given inside same object
I have list of objects where I have to filter the objects based on value of a key present inside same object and create <div>
tag with content. 我有一些对象列表,在这些列表中,我必须根据同一对象内存在的键值来过滤对象,并创建具有内容的<div>
标签。
List of objects: 对象列表:
{
"statusCode" : 200,
"statusMessage" : "OK",
"result" : [
{
"owner" : {
"id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
},
"name" : "Test 12345",
"description" : "Test 12345",
"created_at" : 1465222538,
"active" : "true",
"id" : "2ade9236-c382-400c-9c0b-94e96db9b2aa",
"status" : "OPEN"
}, {
"owner" : {
"id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
},
"name" : "sample2",
"description" : "sample2",
"created_at" : 1465117865,
"active" : "true",
"id" : "8bf206f9-d3e0-43f4-ba3f-f71c88db9b0e",
"status" : "IN PROGRESS"
},
]
}
I want to filter data based on "status" : "IN PROGRESS"
or "status" : "OPEN"
and show the data inside <li>
tag but the thing is identifier(key) is present inside the same object. 我想根据"status" : "IN PROGRESS"
或"status" : "OPEN"
来过滤数据,并在<li>
标记内显示数据,但同一对象内却存在identifier(key)。 How do I achieve this in angularjs or vanilla javascript? 如何在angularjs或vanilla javascript中实现此目的?
For now I am looping using ng-repeat to create and show data in <li>
: 现在,我循环使用ng-repeat在<li>
创建和显示数据:
<div>
<ul>
<li ng-repeat="wd in currentPageWorkOrders>
<a ng-click="viewProject(wd)" href="">
<h4>{{wd.name}}</h4>
</a>
<p>Publisher Name</p>
</li>
</ul>
</div>
You can use ng-if to filter the items.codepen url for reference http://codepen.io/nagasai/pen/MeaawO 您可以使用ng-if过滤项目。codepen网址以供参考http://codepen.io/nagasai/pen/MeaawO
<li ng-repeat="wd in currentPageWorkOrders.result" ng-if="wd.status == 'OPEN'">
<a ng-click="viewProject(wd)" href="">
<h4 >{{wd}}</h4>
</a>
</li>
Hope this is helpful for you 希望这对您有帮助
You can use filters by Angular in a shorter way. 您可以按较短的方式使用Angular过滤器。 eg You can filter in the ng-repeat. 例如,您可以过滤ng-repeat。
So, your ng-repeat will be something like this: 因此,您的ng-repeat将如下所示:
<li ng-repeat="wd in elements | filter:search">
<a ng-click=" viewProject(wd) " href=" ">
<h4>{{wd.name}}</h4
</a>
<p>Status: {{wd.status}}</p>
</li>
Where the search is a new element where you set the fiters elements. 搜索是在其中设置fiters元素的新元素。 In my case I use: 就我而言,我使用:
<span class="btn btn-default" ng-click="search.status=''">No Filters</span>
<span class="btn btn-primary" ng-click="search.status='OPEN'">Show Open</span>
<span class="btn btn-success" ng-click="search.status='IN PROGRESS'">Show In Progress</span>
You can check how it works, in the Plunkr: https://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG?p=preview 您可以在Plunkr中检查其工作方式: https ://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG ? p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.