如何使用 ng-repeat 显示 JSON 数据？答案

【问题标题】：How can I use ng-repeat to display JSON data?如何使用 ng-repeat 显示 JSON 数据？
【发布时间】：2016-04-28 19:52:30
【问题描述】：

我是 Angular JS 的新手。我希望使用 ng-repeat 模块。要求是此模块应读取我的 JSON 数据，如下所示，然后将其显示到购物车页面。

我只需要显示名称、数量和价格选项。显示将在引导模块（购物车页面）上完成。有什么建议吗？

  {
      "region":"latin america",
      "category":"coffee",
      "price":40,
      "name":"Sulawesi, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"blonde",
      "type":"decaffinated"
   },
   {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"3 Region Blend, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
   },
   {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"Starbucks Reserve Eastern D.R. Congo Lake Kivu",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
   }
]

【问题讨论】：

{{n.region}}

标签： angularjs json angularjs-ng-repeat ng-repeat

【解决方案1】：

这样的事情会奏效。使用任何你想要的 HTML 结构来显示你需要的数据。

<div ng-repeat="row in myJson">
    <div>{{ row.name }}</div>
    <div>{{ row.quantity }}</div>
    <div>{{ row.price }}</div>
</div>

【讨论】：

【解决方案2】：

假设它在你的咖啡控制器中是一个数组：

this.coffees=
[
 {
      "region":"latin america",
      "category":"coffee",
      "price":40,
      "name":"Sulawesi, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"blonde",
      "type":"decaffinated"
    },
    {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"3 Region Blend, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
    },
    {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"Starbucks Reserve Eastern D.R. Congo Lake Kivu",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
    }
];

比在你的 html 文件中：

<div ng-app="myapp">
  <div ng-controller="coffeControlloer as cffCtrl">
   <div ng-repeat="coffee in cffCtrl.coffees">
    <div>{{ coffee.name }}</div>
    <div>{{ coffee.quantity }}</div>
    <div>{{ coffee.price }}</div>
  </div>
 </div>

【讨论】：