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

Question

我正在尝试解决 ng-repeat 问题。我可以看到 2 种方法来解决它 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

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

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

$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

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