数组内的角度过滤数组答案

【问题标题】：Angular filtering array within array数组内的角度过滤数组
【发布时间】：2016-07-08 00:02:44
【问题描述】：

我无法理解使用 $filter 或 $grep 进行深度过滤。

我有一个 Store 对象数组，每个 Store 对象都包含一个 Orders 数组：

vm.Stores：

[{
    Stores: [{
        Id: 1,
        Orders: [{
            Id: 11,
            Selected: true
        }, {
        {
            Id: 12,
            Selected: false
        }]
    }, {
        Id: 2,
        Orders: [{
            Id: 21,
            Selected: false
        }, {
        {
            Id: 22,
            Selected: true
        }]
    }],   
}]

我想要一个选定属性为 true 的 Orders 数组：

vm.selectedOrders：

[{
    Id: 11,
    Selected: true
}, {
    Id: 22,
    Selected: true
}]

这就是我正在尝试的：

vm.selectedOrders = $filter('filter')(Stores.Orders, {'selected': true});

显然不正确。我尝试过的其他方法是嵌套的 forEach 循环，但我经常使用这些命令，所以我需要一种有效的方法来做到这一点。

我已经尝试将订单展平为他们自己的数组，但现在我正在管理另一个对象数组，它不是我的 html 中使用的对象数组，所以它不匹配。

文档没有帮助。过滤器有很多用途，但似乎都不适合我 https://docs.angularjs.org/guide/filter

而且参数解释意义不大

https://docs.angularjs.org/api/ng/filter/filter

例子是

基于量角器
甚至不包含 $filter('filter')！

什么是比较器？

【问题讨论】：

我面前没有 Angular 项目……但如果我没记错的话，你应该可以去 Stores[0].Orders。如果是这样，您可以遍历商店并建立选定的订单。您仍然会循环，但只会在每个 Store 上循环。

标签： javascript arrays angularjs angularjs-filter

【解决方案1】：

我不是 Angular 专家。但是，对于您给定的结构，您无法避免嵌套循环，无论是使用 Angular 抽象还是通过语言核心完成 - 一个简单的解决方案可能看起来像这样......

var
    Stores = [{
        Id: 1,
        Orders: [{
            Id: 11,
            Selected: true
        }, {
            Id: 12,
            Selected: false
        }]
    }, {
        Id: 2,
        Orders: [{
            Id: 21,
            Selected: false
        }, {
            Id: 22,
            Selected: true
        }]
    }],

    selectedOrders = Stores.reduce(function (collector, store) {

        collector = collector.concat(
            store.Orders.filter(function (order) {

                return order.Selected;

            })/*.map(function (order) {
                return {
                    storeId: store.Id,
                    orderId: order.Id
                };
            })*/
        );
        return collector;

    }, []);

console.log("selectedOrders : ", selectedOrders);

【讨论】：

哦。我认为 $filter 和/或 grep 的全部意义在于您可以像这样深入地进行操作。谢谢。
@DaveC426913 ...好吧，毕竟它仍然是JavaScript。通过 API 进行的简单外观和方便的抽象无法发挥任何性能魔力。它甚至在顶部添加了更多进程。

【解决方案2】：

你可以简单地在视图中使用过滤器：

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.stores = [  
         {  
            "Id":1,
            "Orders":[  
               {  
                  "Id":11,
                  "Selected":true
               },
               {  
                  "Id":12,
                  "Selected":false
               }
            ]
         },
         {  
            "Id":2,
            "Orders":[  
               {  
                  "Id":21,
                  "Selected":false
               },
               {  
                  "Id":22,
                  "Selected":true
               }
            ]
         }
      ];
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as main">
  <ul>
    <li ng-repeat-start="store in main.stores" ng-bind="store.Id"></li>
    <ul ng-repeat-end ng-repeat="order in store.Orders | filter: { Selected: true }">
      <li ng-bind="'Id:' + order.Id"></li>
    </ul>
  </ul>
</body>

</html>

【讨论】：

除了现在我的视图不反映我的模型。
我没听懂你……你的意思是什么？