数组内的Angular js过滤器数组答案

【问题标题】：Angular js filter array inside array数组内的Angular js过滤器数组
【发布时间】：2016-03-30 11:44:17
【问题描述】：

我很难使用 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>

【问题讨论】：

请说明您尝试过的无效。这不是代码编写服务。您应该展示您的尝试

标签： javascript angularjs angularjs-filter

【解决方案1】：

在这里创建了工作 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
}
})

【讨论】：