Question

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

没有通配符可以说“类别”：“无论什么”？

因此，在这种情况下，我会深入到item = bottled-drinks和/或sandwiches。所以当我{I} ng-repeat="i in item"时，我不想要它。

json -

category

Answer 1

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

平面阵列是最简单，最灵活，最有效的方法：

$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卡路里的物品。（因为你不需要连接数组或其他东西。）

（有一种方法可以使用角度$过滤器代替ng-if ......类似...... ng-repeat="item in foodItems | filter:{category:'sandwiches'}"（在这里疯狂猜测！）但是我会留给你研究，因为我我不能保证语法是正确的。

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

Answer 2

使用您现有的数据结构，这可以让您到达目的地。

注意：如果您更改了数据结构，这将更容易实现。我将在底部展示一个例子。

以下是您当前配置的修复程序。

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

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

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

3 个答案: