angularjs - NG-重复：访问键和值从JSON数组对象

问题描述：

我的JSON数组对象如下图所示。

I have JSON Array object as shown below.

$scope.items = 
    [
    {Name: "Soap",  Price: "25",  Quantity: "10"},
    {Name: "Bag",   Price: "100", Quantity: "15"},
    {Name: "Pen",   Price: "15",  Quantity: "13"}
];

我想要得到的键和值分别在angular.js采用NG-重复。我曾尝试以下code，但它不工作。

I want to get the keys and values separately using ng-repeat in angular.js. I have tried the following code but its not working.

<tr ng-repeat="(key, val) in items">
  <td>{{key}}</td> 
  <td>{{val}}</td>
 </tr>

我相信问题出在括号[和]。任何人都可以请建议我如何的问题可以解决？

I believe the problem is with the braces '[' and ']'. Can anyone please suggest me how the issue can be resolved ?

感谢你这么多的答复。我曾尝试你的code和它的工作。但我的真正的要求是显示的项目如下图所示。

Thank you so much for the reply. I have tried your code and its working. But my real requirement is display the items as shown below.

Name     Price  Quantity
Soap        25  10
Bag        100  15
Pen         15  13

我使用了一些＆LT; TR＆GT; 和＆LT; TD＆GT; 在HTML中。但没有在屏幕上得到displayd。的codeS如下所示。

I am using some <tr> and <td> in html. But nothing getting displayd in screen. The codes are shown below.

<table>  
 <tr ng-repeat="item in items">
  <tr ng-repeat="(key, val) in item">
      <td>{{key}}</td>
      <td>{{val}}</td>
  </tr>
</tr> 
</table>

我知道＆LT; TR＆GT; 的另一个内部＆LT; TR＆GT; 不是由HTML不允许的。我试图通过best.But没有运气。
这将是巨大的，如果你能帮助我在这。
先谢谢了。

I know that <tr> inside of another <tr> is not permitted by html. I tried by best.But no luck. It will be great if you could help me in this. Thanks in advance.

答

您已经有了对象的数组，所以你需要使用 NG-重复两次，如：

You've got an array of objects, so you'll need to use ng-repeat twice, like:

<ul ng-repeat="item in items">
  <li ng-repeat="(key, val) in item">
    {{key}}: {{val}}
  </li>
</ul>

例如： http://jsfiddle.net/Vwsej/

需要注意的是在性能对象顺序不能保证。

Note that properties order in objects are not guaranteed.

<table>
    <tr>
        <th ng-repeat="(key, val) in items[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="item in items">
        <td ng-repeat="(key, val) in item">{{val}}</td>
    </tr>
</table>

例如： http://jsfiddle.net/Vwsej/2/

angularjs - NG-重复：访问键和值从JSON数组对象

相关推荐