编辑：

Question

我有JSON Array对象，如下所示。

$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>内。我最好的尝试。但没有运气。如果你可以帮助我，那将是很棒的。提前谢谢。

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

Answer 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是最佳方式，但目前还不能想到另一种替代方案。

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

angularjs - ng-repeat：从JSON数组对象访问键和值

编辑：

3 个答案:

编辑：