Question

我正在尝试根据对象数组创建一系列行。我正在尝试生成一系列列，显示对象的每个属性（每个属性具有相同的属性），行显示属性值。

我目前正在使用以下代码。

<div ng-controller="HomepageController" >

<!-- form holding the name -->
  <form td-ui-grid-row ng-controller="HomepageController" 
    ng-submit="vm.addData()" class="form-inline party-form" ng-repeat="dataEntry in vm.dataList">
    <div td-ui-grid-col="3xs" ng-repeat="dataContent in dataEntry">
      dataContent:{{dataContent}}
    </div>

  </form>

</div>

vm.data是以下一系列数据：[{＆＃34; name＆＃34;：＆＃34; davis＆＃34;，＆＃34; phone＆＃34;：＆＃34; 11111111111＆＃34; }，{＆＃34;名称＆＃34;：＆＃34; graeham＆＃34;＆＃34;电话＆＃34;：＆＃34; 222222222222＆＃34;}，{＆＃34;名称＆＃34 ;: ＆＃34;埃里克＆＃34;＆＃34;电话＆＃34;：＆＃34; 33333333333＆＃34;}]

我希望生成一个类似于以下内容的表：

davis graeham eric

11111111111 222222222222 33333333333

但是，我得到的是逆转：

davis 11111111111

graeham 222222222222

eric 33333333333

我简化了代码，以便更容易查看和使用：

<div ng-controller="HomepageController" >

<!-- form holding the name -->
  <form td-ui-grid-row ng-controller="HomepageController" ng-submit="vm.addData()" class="form-inline party-form">
    <table>

      <tr>
        <td ng-repeat="person in vm.dataList">
          <input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.name}}" required>
        </td>
      </tr>
      <tr>
        <td ng-repeat="person in vm.dataList">
          <input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.phone}}" required>
        </td>
      </tr>
    </table>


  </form>

</div>

此代码现在显示正确的输出格式，但我需要能够遍历任意数量的对象属性

.directive('tdUiGridRow', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.addClass('td-row');
        if (attrs.tdUiGridRow) {
          element.addClass('td-row-type-'+attrs.tdUiGridRow);
        }
      }
    };
  })

Answer 1

请在下面做。你会创建两个循环，一个用于名称，一个用于电话。

<div><span ng-repeat="contact  in vm.data">{{contact.name}}</span></div>
<div><span ng-repeat="contact in vm.data">{{contact.phone}}</span></div>

Answer 2

这只需要多次循环数据，每次都提取一个属性。

<table>
  <tr>
    <td ng-repeat="person in data">{{person.name}}</td>
  </tr>
  <tr>
    <td ng-repeat="person in data">{{person.phone}}</td>
  </tr>
</table>

http://plnkr.co/edit/tXmaTmPuwbsN62cQLJuF?p=preview

使用ng-repeat切换列和行

2 个答案: