【问题标题】：angularjs - ng-repeat: access key and value from JSON array objectangularjs - ng-repeat：从 JSON 数组对象访问键和值
【发布时间】：2014-02-11 09:21:56
【问题描述】：

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

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

我想在 angular.js 中使用 ng-repeat 分别获取键和值。我已经尝试了以下代码，但它不起作用。

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

我认为问题出在大括号“[”和“]”上。谁能建议我如何解决这个问题？

编辑：

非常感谢您的回复。我已经尝试过您的代码及其工作。但我真正的要求是显示如下所示的项目。

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

我在 html 中使用了一些 <tr> 和 <td>。但是屏幕上什么也没有显示。代码如下所示。

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

我知道 html 不允许在另一个 <tr> 中使用 <tr>。我尽力而为。但没有运气。如果你能在这方面帮助我，那就太好了。提前致谢。

【问题讨论】：

标签： json angularjs

【解决方案1】：

你有一个对象数组，所以你需要使用两次ng-repeat，比如：

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

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

编辑：

请注意，不保证对象中的属性顺序。

<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/

【讨论】：

@AjithBalakrishnan：不是最佳实践（不保证对象中的属性顺序），但这里有一个示例：jsfiddle.net/Vwsej/2
谢谢，这个使用 ng-repeat 两次的技巧帮助我解决了 JSON 数组解析问题。 :)

【解决方案2】：

我刚刚开始检查 Angular（所以我很确定还有其他更优化的方法来完成它），我在搜索 ng-repeat 的示例时遇到了这个问题。

装腔作势者的要求（有更新）：

“...但我真正的要求是显示如下所示的项目..”

看起来足够真实（而且很简单），所以我想我应该试一试并尝试获得所需的确切结构。

angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
    $scope.items = [{
      Name: "Soap",
      Price: "25",
      Quantity: "10"
    }, {
      Name: "Bag",
      Price: "100",
      Quantity: "15"
    }, {
      Name: "Pen",
      Price: "15",
      Quantity: "13"
    }];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
    <table>
      <thead>
        <tr ng-repeat="item in items | limitTo:1">
          <th ng-repeat="(key, val) in item">
            {{key}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat="(key, val) in item">
            {{val}}
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</body>

limitTo:(n) 过滤器是关键。我仍然不确定是否有多个 ng-repeat 是解决它的最佳方法，但目前想不出另一种选择。

【讨论】：

【解决方案3】：

解决方案我有包含数据的 json 对象

[{"name":"Ata","email":"test@test1.com"}]

您可以使用以下方法迭代 ng-repeat 并使用表格格式而不是列表。

<div class="container" ng-controller="fetchdataCtrl">    
  <ul ng-repeat="item in numbers">
    <li>            
      {{item.name}}: {{item.email}}
    </li>
  </ul>     
</div>

【讨论】：

【解决方案4】：

试试这个..

<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>

【讨论】：