Ng-repeat

Question

我正在尝试解决 ng-repeat 问题。我可以看到 2 种方法来解决它 1. 使用 filter 不 repeat/display 对象的属性 of category，我不知道如何不使用它的值或 2. 如果有办法说 ng-repeat="i in items.drinks && items.sandwiches.

没有通配符说"category":"whatever"?

所以在这种情况下，我被深入到 item = bottled-drinks and/or 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

不是我想要的答案，但我做了一个 ng-if 并在我通过的控制器中检查了 i.title 是否存在...如果存在则显示，如果不存在则显示。必须有更好的方法。

Answer 2

我只把它放在这里是因为评论框有时很痛苦：

平面数组是最简单、最灵活、最高效的：

$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 的解决方案（也不错）相比，你会更容易展示一些东西自定义列表 - 例如显示所有热量低于 300 卡路里的项目。（因为您不需要连接数组或诸如此类的东西。）

（有一种方法可以使用 angular $filters 而不是 ng-if... 类似... ng-repeat="item in foodItems | filter:{category:'sandwiches'}"（在这里随意猜测！）但我会保留它供您研究，因为我不能保证语法是正确的。

此外，为了彻底，我会使用基于数字的 ID（不那么混乱），并使用 ng-repeat track by 来获得一些小的性能。

Answer 3

使用您现有的数据结构，这将带您到达您想去的地方。

NOTE: If you changed your data structure this would be much easier to implement. I'll show an example at the bottom.

这是针对您当前配置的修复。

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

Now you can use the keys you wish to use, but this is not that easy to do. If your data was instead structured like this...

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

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

Ng-repeat - filter out by object's constant property with different values

javascript

json

angularjs

angularjs-ng-repeat