数组中的Angular js过滤器数组

Angular js filter array inside array

本文关键字：数组过滤器 js Angular 更新时间：2023-10-10

我很难用Angular过滤器来解决以下问题。

过滤器逻辑如下：
1）如果该项的所有listItem都具有qtyLeft！=0，不显示该项目
2）如果该项目的任何listItem的qtyLeft==0，则显示项目标题以及qtyLeft==0 的核心条件listItem

下面是我的数据结构的一个基本示例，一个项目数组：

$scope.jsonList = [
    {
        _id: '0001',
        title: 'titleA',
        list: {
            listName: 'listNameA',
            listItem: [
                {
                   name: 'name1',
                   qtyLeft: 0
                },
                {
                   name: 'name2',
                   qtyLeft: 0
                },
            ]
        }
    },
    {
        _id: '0002',
        title: 'titleB',
        list: {
            listName: 'listNameB',
            listItem: [
                {
                   name: 'name3',
                   qtyLeft: 2
                },
                {
                   name: 'name4',
                   qtyLeft: 0
                },
            ]
        }
    },
    {
        _id: '0003',
        title: 'titleC',
        list: {
            listName: 'listNameC',
            listItem: [
                {
                   name: 'name5',
                   qtyLeft: 2
                },
                {
                   name: 'name6',
                   qtyLeft: 2
                },
            ]
        }
    },
]

以下是最终预期结果：

<div ng-repeat="item in jsonList | filter: filterLogic">
    <div> </div>
</div>
// final outcome
<div>
    <div>Title: titleA, ListItem: Name1, Name2</div>
    <div>Title: titleB, ListItem: Name4</div>
</div>

在此处创建工作Plunkr。https://plnkr.co/edit/SRMgyRIU7nuaybhX3oUC?p=preview

如果要使用此指令，请不要忘记在项目中包含underscore.js库。

<div ng-repeat="jsonItem in jsonList | showZeroElement track by $index">
   <div>Title:{{ jsonItem.title}}, ListItem:<span ng-repeat="item in    
        jsonItem.list.listItem track by $index" ng-if="item.qtyLeft==0"> 
     {{item.name}}</span>
  </div>
</div>

和

app.filter('showZeroElement', function() {
return function(input) {
var items = []
angular.forEach(input, function(value, index) {
  angular.forEach(value.list.listItem, function(val, i) {
    var found = _.findWhere(items, {
      'title': value.title
    })
    if (val.qtyLeft === 0 && found === undefined) {
      items.push(value)
    }
  })
})
return items
}
})