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

Question

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

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

  {
      "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"
   }
]

Answer 1

像这样的东西会起作用。使用任何你想要的 HTML 结构来显示你需要的数据。

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

Answer 2

假设它是您的 coffeeController 中的一个数组：

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>

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

How can I use ng-repeat to display JSON data?

json

angularjs

ng-repeat

angularjs-ng-repeat