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

I am a newbie to Angular JS . I wish to make use of the ng-repeat module. The requirement is such that this module shall read my JSON data as posted below and then it shall display it to a shopping cart page.

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

I only need to display the name,quantity and price option. The display will be done on the bootstrap module(shopping cart page). Any suggestions, please ?

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

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

2 个解决方案

#1

Something like this will work. Use whatever HTML structures you want in order to display your data how you need.

像这样的东西会起作用。使用您想要的任何HTML结构，以便根据需要显示数据。

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

#2

assume that its an array in your coffeeController:

假设它在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"
    }
];

than in your html file:

比你的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>

#1