数组内的角度过滤数组

时间:2016-07-08 00:02:44

标签: javascript arrays angularjs angularjs-filter

我无法使用$ 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

示例是

  1. 基于量角器
  2. 甚至不包含$ filter('filter')!
  3. 什么是比较器?

2 个答案:

答案 0 :(得分:0)

我不是角色专家。但是对于给定的结构,您无法避免嵌套循环,无论是使用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);

答案 1 :(得分:0)

您只需在视图中使用过滤器即可:

<!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>
:before