Question

我很难做一个Angular过滤器来解决下面的问题。

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

的coressponding 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>

Answer 1

在这里创建了Plunkr。 https://plnkr.co/edit/SRMgyRIU7nuaybhX3oUC?p=preview

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

<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
}
})

Angular js过滤数组内部的数组

1 个答案: