Question

我有对象列表，我必须根据同一对象中存在的键的值过滤对象，并创建包含内容的<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>标记内显示数据，但标识符（key）存在于同一对象中。我如何在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>

Answer 1

您可以使用filter方法过滤掉所需的数据

var _getResult = myArray[0].result;
var filterArray = _getResult.filter(function(item){
 return item.status ==="OPEN" || item.status === "IN PROGRESS"

})
console.log(filterArray)

请参阅此jsfiddle

Answer 2

您可以使用ng-if过滤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>

希望这对你有所帮助

Answer 3

您可以以更短的方式使用Angular过滤器。例如您可以在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>

搜索是设置fiters元素的新元素。就我而言，我使用：

<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

如何根据同一对象

3 个答案: