Question

我在角度模板中有这个代码，它只是左边的标题和从上到下的数据。

<div class="panel-body">

        <table class="table table-striped">
            <tr ng-repeat="f in fields">
                <th>{{ f }}</th>
                <td>{{ data[f] }}</td>
            </tr>

        </table>

    </div>

但是，不是一行中的一个字段，而是希望在一行中有2个字段，在第二行中有第3个字段，第4个字段，依此类推。

所以我有2列布局

 <tr><th>{{ f }}</th>
 <td>{{ data[f] }}</td> 
 <th>{{ f }}</th>
 <td>{{ data[f] }}</td>
</tr>


field = ['id', 'name', 'username', 'email', 'age']

data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]

我想要的结果是

<tr><td>id:</td><td>1</td><td>name:</td><td>john</td></tr>
<tr><td>username:</td><td>john</td><td>age:</td><td>20</td></tr>

这应该用ng-repeat而不是硬编码来完成

Answer 1

这是一个答案。我不确定这是你想要的，但我认为它很接近：http://plnkr.co/edit/ADKu2WEb9TyvEXASOJyz?p=preview

请注意，我正在使用ng-repeat-start / ng-repeat-end来处理您想要执行的多行操作：

<body ng-app="example" ng-controller="ExampleController">
  <table>
    <tr ng-repeat-start="row in data">
      <td>{{ label(0) }}:</td>
      <td>{{ value(row, 0) }}</td>
      <td>{{ label(1) }}:</td>
      <td>{{ value(row, 1) }}</td>
    </tr>
    <tr ng-repeat-end>
      <td>{{ label(2) }}:</td>
      <td>{{ value(row, 2) }}</td>
      <td>{{ label(3) }}:</td>
      <td>{{ value(row, 3) }}</td>
    </tr>
  </table>
</body>

其余的只是一个超级简单的模块和控制器：

angular.module('example', [])
  .controller('ExampleController', function ($scope) {
    var fields = [ 'id', 'name', 'username', 'email', 'age' ];
    $scope.data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}];

    $scope.label = function (fieldNumber) {
      return fields[fieldNumber];
    };

    $scope.value = function (row, fieldNumber) {
      return row[fields[fieldNumber]];
    }
  });

Answer 2

您好，但我必须将您的回复更改为以下格式

$scope.data = {
    data1: {
        id: 1,
        name: 'john',
    },
    data2: {
        username: 'john',
        age: 20
    }
};

并且您不需要字段变量

以下是如何在你的HTML中重复虽然我没有给你两个栏目

 <table class="table table-striped">
            <tr ng-repeat="x in data">
                <td ng-repeat="(key,val) in x">{{key}} : {{val}}</td>
            </tr>

        </table>

如何使用角度为

2 个答案: