AngularJs gruppieren nach-Eigenschaft

Ich brauche einen Weg, um eine Liste seiner Eigenschaften.

Habe ich diese plunker: http://jsfiddle.net/Tropicalista/aF2aL/1/

aber nicht wissen, Hacke, um fortzufahren. Ich brauche einen Weg, um die Liste basierend auf dem, was ich wählen in den Checkboxen...

function myCtrl($scope){
    $scope.friends = [

    {
        name: "Michael",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "George Michael",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "Gob",
        gender: "Male",
        hair: "Brunette"
    },
    {
        name: "Tobias",
        gender: "Male",
        hair: "Black"
    },
    {
        name: "Lindsay",
        gender: "Female",
        hair: "Blonde"
    },
    {
        name: "Maeby",
        gender: "Female",
        hair: "Black"
    }
];
$scope.orderBy = function(target){
    $scope.groups = _.groupBy($scope.friends, target);
}
$scope.activeGroups = {};

}

Und das ist mein html:

<input type="checkbox" ng-click="orderBy('name')" />Name
<input type="checkbox" ng-click="orderBy('gender')" />Gender
<input type="checkbox" ng-click="orderBy('hair')" />Hair

<div data-ng-repeat="(myFilter, users) in groups">
    <h2>{{myFilter}}</h2>        
    <ul>
        <li data-ng-repeat="user in users">
        {{ user.name }}
        </li>
    </ul>
</div>

wie wäre es, wenn Sie überprüfen 2 Checkboxen?
Versuchen Sie zu verwenden $Uhr auf der Gruppen-Typen und set groups entsprechend.
Erklären Sie mit einigen Beispiel? Ich bin ein noob...
Hallo, werfen Sie einen Blick stackoverflow.com/questions/17617664/...
Möglich, Duplikat der Winkel-ng-repeat bedingte wrap-Elemente in element (Gruppe Elemente in ng-repeat)

InformationsquelleAutor Tropicalista | 2013-09-08

angularjs

5

Erste, für so etwas, ich mag es viel lieber mit einem radio statt einer checkbox. Es ist semantisch korrekt. Kontrollkästchen zeigen an, können Sie die Gruppe von mehr als einem Feld, und es erscheint nicht, aus Ihrer Frage, dass Sie versuchen, dies zu tun.

Wissen, dass Sie definieren Ihre radios so:
```
<input type="radio" ng-model="grouping" value="name"  />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair
```
Nun, man kann nur sagen, Ihr ng-repeat Gruppe basiert auf einer groupedFriends Sammlung:
```
<div data-ng-repeat="(group, users) in groupedFriends">
    <h2>{{group}}</h2>        
    <ul>
        <li data-ng-repeat="user in users">
            {{ user.name }}
        </li>
    </ul>
</div>
```
Und dann dem controller nur Uhren die grouping variable und Gruppe die Daten:
```
$scope.$watch('grouping', function() {
    $scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
});

$scope.grouping = "gender";
```
Hier ist ein arbeiten Geige.

STEVE HOLT!
- Dass die isin nicht eine akzeptable Antwort. Wenn Sie bemerken, in der Konsole, werden Sie sehen, dass es verursacht unendliche verdaut.
- Guter Punkt. Ich kann dieses Problem beheben. Ich werde versuchen, dass bis. Danke!
- Die einzige Möglichkeit, die ich es geschafft, es zu beheben in meiner Anwendung war die Gruppierung in den controller und setzen eine groupedItems Eigenschaft auf die $scope. Ich bin nicht sicher, ob es die beste oder einzige Art und Weise jedoch. Sie können eine Uhr auf friends um sicherzustellen, dass die Gruppierungen werden aktualisiert, wenn friends änderungen.
- Ja, habe ich aktualisiert. Mit einer Funktion zur Rückgabe eines anderen array jedes mal bewirkt, dass die $digest Feuer immer und immer wieder. Der bessere Weg, es zu tun (und nicht mehr code als vorher) ist, zu beobachten grouping Eigenschaft und gruppieren Sie die Daten in eine neue Eigenschaft.
- Ein dickes Lob für die inhaftierten Dev-ref.
- Getestet habe ich es und ich möchte wissen, wie man leere ausblenden oder inexistent Schlüssel und Wert wie in diesem Beispiel ohne Namen: {Geschlecht: "Frauen",die Haare: "Schwarz"}, Es zeigt ein leeres <li>
InformationsquelleAutor Brian Genisio
3

Können Sie verwenden Sie groupBy von eckig.filter Modul, Es ist einfach zu bedienen, und tatsächlich schneller als lodash Umsetzung finden Sie unter: link.

Verwendung: (key, val) in collection | groupBy: 'property' oder nested.property

hier ist ein Beispiel:

JS:
```
$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];
```
HTML:
```
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ player.name }} 
  </li>
</ul>
```
ERGEBNIS:

Name der Gruppe: alpha

* Spieler: Gen

Name der Gruppe: beta

* Spieler: George

* Spieler: Paula

Name der Gruppe: gamma

* Spieler: Steve

* Spieler: Scruath

UPDATE: jsbin

InformationsquelleAutor a8m

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.