Question

我正在尝试为我的网站创建商店页面。我想在ng-repeat中显示以下json文件：

＆＃13;

{
  "cupcakes": {
      "Vanilla": [
          {"price":"9.99", "stock":"20", "amount":"8",
          "ingredients":"flour, sugar, vanilla extract",
          "popular":true}
      ],
      "Maple": [
          {"price":"9.99", "stock":"15", "amount":"8", 
          "ingredients":"flour, sugar, maple syrup",
          "popular":true}
      ]
  },
  "cookies": {
      "Vanilla": [
          {"price":"7.99", "stock":"50", "amount":"12", "ingredients":"flour, sugar, vanilla extract"}
      ],
      "Maple": [
          {"price":"7.99", "stock":"50", "amount":"12", "ingredients":"flour, sugar, maple syrup"}
      ]
  }
}

＆＃13;

我想显示类型项（蛋糕或饼干），然后显示每个项目的类型（香草或枫木），然后显示唯一属性，并能够过滤和搜索它们。我想我可能要重构我的json文件，但我不确定。我应该使用forEach在我的控制器中提前整理项目吗？这是我的控制器：

angular.module('root', [])
.controller("index", ['$scope', '$http', function ($scope, $http) {
    $scope.name = null;
    $scope.email = null;
    $scope.comments = null;
    $scope.reason = null;
    $scope.employees = [];
    $scope.items = [];


    $http.get('http://localhost:8000/employees.json').then(function(result) {
        $scope.employees = result.data.records;
    });

    $http.get('http://localhost:8000/inventory.json').then(function(result) {
        $scope.items = result.data;
    });

    $scope.isEnabled = function() {
        if ($scope.name && $scope.email && $scope.comments) {
            return false;
        }
        else {
            return true;
        }
    }
}])

Answer 1

以下是使用ng-repeat显示数据的方法：

 <div ng-repeat="(foodKey, foodVal) in foods">
     <b>{{foodKey}}</b>
      <div ng-repeat="(typesKey, typesVal) in foodVal">
          <span>{{typesKey}}</span>
          <ul ng-repeat="types in typesVal">
              <li ng-repeat="(key, val) in types">
                  {{key}} : {{val}}
              </li>
         </ul>
    </div>
</div>

当然只有foods是您在答案中发布的json才会有效。

这是一个有效的jsFiddle。

有关ng-repeat的更多信息，请参阅here。

Answer 2

在Javascript中，几乎所有东西都是数组。您可以迭代一个对象数组，或者在一个对象中迭代它的属性。

以下脚本应该可以完成这项工作。

<div ng-repeat="(itemLabel, itemValue)in items">
     {{itemLabel}}
     <div ng-repeat="(flavorLabel, flavorValue)in itemValue">
         {{flavorLabel}}
         <div ng-repeat="object in flavorValue">
             <div ng-repeat="property in object">
                 {{property}}
             </div>
         </div>
     </div>
</div>

jsfiddle

Answer 3

通过你的JSON。

<div ng-repeat="(key, value) in inventory">{{key}}
<ul>
  <li ng-repeat="(material_key, material_value) in value">{{material_key}}
    <ul>
      <li ng-repeat="(options_key, options_value) in material_value[0]">{{options_key}} - {{options_value}}</li>
    </ul>
  </li>
</ul>
<br>

看看这个plunker。我希望这能解决你的问题。

Answer 4

您需要多个ng-repeaters希望此plunker是您的要求

Answer 5

你可以通过javascript中的JSON键来做任何事情，方法是将JSON转换为对象

JSON.parse(json);

稍后你可以访问任何键，这将是一个对象/ hashmap来循环或排序

因此，在您的情况下，您的API结果可以解析为

var resultData = JSON.parse(result.data);

稍后你可以在你的视图中做一些重复的事情，比如

[{id: 'foo'}, {id: 'bar'}] | orderBy:'id'

如何在ng-repeat中正确显示此json文件？

5 个答案: