Ng-repeat - 用不同的值过滤对象的常量属性

Question

我想解决一个ng-repeat问题。我可以看到两种方法来解决它1.使用filter不重复/显示对象的属性category，我不知道如何使用它的值或2如果有方法可以说ng-repeat="i in items.drinks && items.sandwiches。

有没有通配符来说“类别”：“无论”？

因此，在这种情况下，我深入到item = bottled-drinks和/或sandwiches的位置。所以，当我做ng-repeat="i in item"category是我的意思。我不想要它。

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

使用您现有的数据结构，这将让你在那里你想去的地方。

注意：如果更改了数据结构，实现起来会更容易。我会在底部显示一个例子。

这是您当前配置的修复。

<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" 
      } 
     } 
     } 
    } 
    } 

这将导致一个div使用这些值

{"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"}} 

现在你可以使用你想使用的按键，但这并不容易做到。如果您的数据是这样构造的...

$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

不是我想要的答案，但我做了NG-如果和我通过控制器我再检查，看看是否存在I.标题...如果是的话显示，如果不别。一定有更好的方法。

Answer 3

因为评论框有时是一种痛苦，我只把这个位置：

平板阵列是最简单，最灵活和最有效的一起工作：

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

你会注意到你必须过滤掉一些东西（ng-if），但是如果你和SoEzPz的解决方案（这也不错）相比，你会更容易的时候想要sh下载一些自定义列表 - 例如显示卡路里少于300卡的所有物品。 （因为你不需要连接数组或任何东西）

（有一种方法可以使用角度$过滤器，而不是ng-if ...类似于......​​（野生猜测在这里！）但我会留给你去研究，因为我不能承诺从我头顶的语法是正确的。

此外，为了彻底，我会使用一个基于数字的id（较少杂乱），并使用NG-重复track by获得一些小的性能。