У меня есть список объектов, в которых я должен фильтровать объекты на основе значения ключа, присутствующего внутри одного и того же объекта, и создавать <div>
с содержимым.
Список объектов:
{
"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"
},
]
}
Я хочу фильтровать данные на основе "status": "IN PROGRESS"
или "status": "OPEN"
и показывать данные внутри <li>
но вещь является идентификатором (ключ) присутствует внутри одного и того же объекта. Как достичь этого в angularjs или vanilla javascript?
На данный момент я циклически использую 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>
Вы можете использовать фильтры по Угловому короче. например, вы можете фильтровать в ng-repeat.
Итак, ваш 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>
Где поиск - это новый элемент, в котором вы устанавливаете элементы подгонки. В моем случае я использую:
<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>
Вы можете проверить, как это работает, в Plunkr: https://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG?p=preview
Вы можете использовать ng-if для фильтрации URL-адреса items.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>
Надеюсь, это полезно для вас
<button>OPEN</button>
, <button>IN PROGRESS</button>
и т. Д. Я хочу отображать результаты выше, только когда нажимаю на соответствующие кнопки
Вы можете использовать фильтр метод, чтобы отфильтровать необходимые данные
var _getResult = myArray[0].result;
var filterArray = _getResult.filter(function(item){
return item.status ==="OPEN" || item.status === "IN PROGRESS"
})
console.log(filterArray)
Смотрите этот jsfiddle
<li
> на основе status
ключа
status == open
я создам <li>object data</li>
а если status==In progress' then another
<li> объектные данные </ li> `
<li ng-repeat="item in filteredData | startFrom:currentPage*pageSize | limitTo:pageSize">