Ng-repeat -通过对象's常量属性过滤出不同的值

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

本文关键字：过滤 属性 常量 -通 对象 Ng-repeat      更新时间：2023-09-26

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

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

因此，在本例中，我深入到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"
                        }
                    }
                }

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

注意:如果你改变你的数据结构，这将更容易实现。我将在底部展示一个示例。

这是当前配置的修复。

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

我只把这个放在这里，因为评论框有时很麻烦:

平面数组是最简单、最灵活、最有效的使用方法:

$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来获得一些性能。

不是我想要的答案，但我做了一个ng-if和在控制器中，我通过了，然后检查，看看是否我的title存在…如果是，显示，如果不是，不要。一定有更好的办法。

相关文章：