Ng-repeat - Herausfiltern nach Konstanteneigenschaft des Objekts mit verschiedenen Werten

Question

Ich versuche ein ng-repeat Problem zu lösen. Ich kann sehen, 2 Möglichkeiten, um es zu lösen 1. Verwenden Sie eine filter, um nicht zu wiederholen/Anzeige der Eigenschaft des Objekts category, die ich bin mir nicht sicher, wie ohne Wert zu tun oder 2. Wenn es eine Möglichkeit gibt zu sagen ng-repeat="i in items.drinks && items.sandwiches.

Gibt es keinen Platzhalter, um "Kategorie" zu sagen: "was auch immer"?

Also in diesem Fall bin ich gebohrt, wo item = bottled-drinks und/oder sandwiches. Also, wenn ich das mache ng-repeat="i in item"category ist Klumpen in. Ich will es nicht.

json -

food-items": { 
       "bottled-drinks": { 
        "category": "Bottled Drinks", 
        "drinks": { 
         "drink1": { 
          "title": "Drink Me 1", 
          "calories": "170" 
         }, 
         "drink2": { 
          "title": "Drink Me 2", 
          "calories": "230" 
         }, 
         "drink3": { 
          "title": "Drink Me 3", 
          "calories": "88" 
         } 
        } 
       }, 
       "sandwiches": { 
        "category": "Sandwiches", 
        "sandwiches": { 
         "sandwich1": { 
          "title": "Sandwich Me 1", 
          "calories": "230" 
         }, 
         "sandwich2": { 
          "title": "Sandwich Me 2", 
          "calories": "111" 
         }, 
         "sandwich3": { 
          "title": "Sandwich Me 3", 
          "calories": "700" 
         } 
        } 
       } 

Answer 1

Ihre vorhandenen Datenstruktur verwenden, dies würde Sie, wo Sie hinwollen.

HINWEIS: Wenn Sie Ihre Datenstruktur geändert haben, wäre dies viel einfacher zu implementieren. Ich werde ein Beispiel unten zeigen.

Hier ist der Fix für Ihre aktuelle Konfiguration.

<div ng-controller="MyCtrl"> 
    <div ng-repeat="firstKey in firstKeys"> 
    <div ng-repeat="secondKey in secondKeys"> 
     {{ foodItems[firstKey][secondKey] }} 
    </div><br> 
    </div> 
    <br> 
</div> 

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 

    $scope.firstKeys = ["bottled-drinks", "sandwiches"]; 
    $scope.secondKeys = ["drinks", "sandwiches"]; 

    $scope.foodItems = { 
    "bottled-drinks": { 
     "category": "Bottled Drinks", 
     "drinks": { 
      "drink1": { 
      "title": "Drink Me 1", 
      "calories": "170" 
      }, 
      "drink2": { 
      "title": "Drink Me 2", 
      "calories": "230" 
      }, 
      "drink3": { 
      "title": "Drink Me 3", 
      "calories": "88" 
      } 
     } 
     }, 
     "sandwiches": { 
     "category": "Sandwiches", 
     "sandwiches": { 
      "sandwich1": { 
      "title": "Sandwich Me 1", 
      "calories": "230" 
      }, 
      "sandwich2": { 
      "title": "Sandwich Me 2", 
      "calories": "111" 
      }, 
      "sandwich3": { 
      "title": "Sandwich Me 3", 
      "calories": "700" 
      } 
     } 
     } 
    } 
    } 

Dies wird mit diesen Werten in einem div führen

{"drink1":{"title":"Drink Me 1","calories":"170"},"drink2":{"title":"Drink Me2","calories":"230"},"drink3":{"title":"Drink Me 3","calories":"88"}} 

{"sandwich1":{"title":"Sandwich Me 1","calories":"230"},"sandwich2":{"title":"Sandwich Me 2","calories":"111"},"sandwich3":{"title":"Sandwich Me3","calories":"700"}} 

Jetzt können Sie mit den Tasten Sie verwenden möchten, aber das ist nicht so einfach zu tun. Wenn Ihre Daten stattdessen wie folgt strukturiert ...

$scope.edibles = [ 
    {"category": "Bottled Drinks", 
    "types": [ 
     {"title": "Drink Me 1", 
     "calories": "170"}, 

     {"title": "Drink Me 2", 
     "calories": "230"}, 

     {"title": "Drink Me 3", 
     "calories": "88"} 
    ]}, 

    {"category": "Sandwiches", 
    "types": [ 
     {"title": "Sandwich Me 1", 
     "calories": "230"}, 

     {"title": "Sandwich Me 2", 
     "calories": "111"}, 

     {"title": "Sandwich Me 3", 
     "calories": "700"} 
     ]} 
    ] 


<div ng-repeat="edible in edibles"> 
    <div ng-repeat="foodType in edible.types"> 
    Type: {{ foodType.title }}<br> 
    Calories: {{ foodType.calories }} 
    </div><br> 
</div> 

Answer 2

nicht die Antwort, die ich will, aber ich habe eine ng-ob und in der Steuerung Ich ging ich dann überprüft, um zu sehen, ob i.title existiert ... wenn so angezeigt werden, wenn nicht nicht. Es muss einen besseren Weg geben.

Answer 3

ich dies nur hier setzen, weil die Kommentar-Box ein Schmerz manchmal ist:

Flach Arrays sind die einfachste und flexibelste und effizienteste mit arbeiten:

$scope.foodItems = [ // Array (not object) 
    { 
     "id": "drink1", 
     "label": "Drink Me 1", 
     "calories": "170" 
     "category": "bottled-drinks", 
    }, 
    { 
     "id": "sandwich1", 
     "label": "Sandwich Me 1", 
     "calories": "270" 
     "category": "sandwiches", 
    }, 
    ... (ALL ITEMS) 
]; 

// Categories are a different resource, so better keep them in their own array. 
// You'll thank me when you want move your stuff to some server-API. 
$scope.categories = [ 
    { "id": "sandwiches", "category-label": "Sandwiches" }, 
    { "id": "bottled-drinks", "category-label": "Bottled Drinks" }, 
]; 

HTML

<div ng-repeat="category in categories"> 
    <h2>{{ category.label }}<h2> 
    <div ng-repeat="item in foodItems" ng-if="item.category==category.id"> 
     <h3>{{ item.label }}</h3> 
     <p>Calories: {{ item.calories }}</p> 
     <p>Description: {{ item.description }} (or whatever) </p> 
    </div> 
</div> 

Sie werden feststellen, dass Sie einige Sachen herausfiltern müssen (ng-if), aber wenn Sie mit der Lösung von SoEzPz vergleichen (was auch nicht schlecht ist), haben Sie eine viel einfachere Zeit, wenn Sie wollen einige benutzerdefinierte Liste - zum Beispiel zeigen Sie alle Artikel mit weniger als 300 Kalorien. (Da Sie keine Arrays oder Ähnliches concaten müssen.)

(Es gibt eine Möglichkeit, eckige $ -Filter anstelle von ng-if ... etwas wie ... zu verwenden. ng-repeat="item in foodItems | filter:{category:'sandwiches'}" (wild rate hier!) Aber Ich lasse es für Sie zu erforschen, da ich nicht versprechen kann, dass die Syntax von der Spitze meines Kopfes ist.

Auch, um gründlich zu sein, würde ich eine Zahl basierte ID (weniger chaotisch) verwenden track by ng-repeat einige kleinere Leistung zu gewinnen.