Question

我是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"
   }
]

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数据？

2 个答案: