2016-07-08 5 views
0

Ich kann nicht meinen Kopf um tiefe Filterung mit $ Filter oder $ Grep.Angular Filtering Array innerhalb des Arrays

ich ein Array von Speicherobjekte, die jeweils Speicherobjekt enthält eine Reihe von Bestellungen:

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 
     }] 
    }], 
}] 

Ich möchte ein Array der Aufträge, deren ausgewählte Eigenschaft true :

vm.selectedOrders:

Das ist, was ich versuche:

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

Offensichtlich falsche. Andere Methoden, die ich ausprobiert habe, sind für jede Schleife verschachtelt, aber ich arbeite viel mit diesen Befehlen, also brauche ich einen effizienten Weg.

Ich habe versucht, die Aufträge in ihr eigenes Array zu reduzieren, aber jetzt verwalte ich ein anderes Objekt-Array, und es ist nicht das Objekt-Array, das in meinem HTML verwendet wird, so dass es nicht übereinstimmt.

Die Dokumente sind nicht hilfreich. Filter verwendbar ist in vielerlei Hinsicht, von denen keines scheint das Richtige für mich zu sein https://docs.angularjs.org/guide/filter

und die Parameter Erklärungen machen wenig Sinn

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

Das Beispiel ist

  1. Basiert auf Winkelmesser
  2. enthält nicht einmal einen $ Filter ('Filter')!

Und was ist ein Komparator?

+0

ich habe keinen Winkel Projekt vor mir habe ... aber wenn ich mich richtig erinnere sollen Sie in der Lage sein zu gehen 'Shops [0] .Orders '. Wenn dies der Fall ist, können Sie die Geschäfte durchlaufen und die ausgewählten Aufträge aufbauen. Sie würden immer noch loopen, aber nur über jeden "Store". –

Antwort

0

Ich bin kein Angular Experte. Doch für Ihre gegebene Struktur können Sie nicht verschachtelte Schleifen vermeiden, unabhängig davon, ob sie mit einem Winkel Abstraktion oder über den Sprachkern erfolgt - eine einfache Lösung wie das aussehen könnte ...

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); 
+0

Oh. Ich dachte, der ganze Sinn von $ filter und/oder grep wäre, dass man es so tief machen könnte. Danke. – DaveC426913

+0

@ DaveC426913 ... nun, immerhin ist es immer noch JavaScript. Eine einfache Suche und handliche Abstraktion über eine API kann keine Leistungszauberei machen. Es fügt sogar noch mehr Prozesse hinzu. –

0

Sie können es einfach tun mit Filter im Blick:

(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>

+0

Ausgenommen jetzt spiegelt meine Ansicht nicht mein Modell wider. – DaveC426913

+0

Ich habe dich nicht .. was meinst du? – developer033

+0

@ DaveC426913, es funktioniert, was ist das Problem? – developer033