Question

我有这个应用程序，它允许用户创建自己的事件和其他人注册到这些事件。创建活动时，您可以拥有任意数量的问题，并可以根据需要为问题命名。这些将在注册时被要求。应用程序将从字段中获取问题的名称并将其记录到条目中。

我在显示将要参加的人员表时遇到问题。我的应用正在处理一个列表：

 var events = [{
    Title: 'Summer Festival',
    Date: '12.7.2015',
    Location: 'Moon',
    Description: Fillertxt,
    url: "www.something.com",
    MaxEntries: 10,
    fields: [{
      id: 'choice1',
      name: "Gender"
    }, {
      id: 'choice1',
      name: "Address"
    }],
    entries: []
  },

字段包含所有问题，当我添加条目并打印时，在这种情况下会显示{"Gender":"rr","Address":"rr"}。

问题在于，因为我无法预见这些字段的名称，我无法使用ng-repeat，然后只说<td>{{event.Gender}}<td>，因为它可能也是{{event.lifesmeaning}}。那么我怎么能用注册信息显示一个漂亮的表格。我能以某种方式从字段中获取这些名称吗？我尝试了嵌套的ng-repeat，但没有让它起作用。

这也是注册页面的一部分：

<div class="col-md-4">
  <form>
    <div class="border-box">
      <center>
        <h2 class="big">Participate:</h2>

        <div data-ng-hide="!listFull()">The registration for this event is full.</div>
        <div class="form-group" data-ng-hide="listFull()">
          <label for="eventInput">Name</label>
          <input style="width: 200px;" type="text" class="form-control" id="eventInput" data-ng-model="newEntry.name">
        </div>
        <div data-ng-repeat="field in event.fields" data-ng-hide="listFull()">
          <div class="form-group">
            <label for="{{$index + 1}}">{{field.name}}</label>
            <input style="width: 200px;" type="text" class="form-control" id="{{$index + 1}}" data-ng-model="newEntry[field.name]">
          </div>
        </div>
        <button style="width: 100px;" data-ng-click="addEntry()" class="btn btn-primary" data-ng-hide="listFull()">Save</button>

      </center>
      <br/>
    </div>
  </form>

  <div class="border-box2">
    <h2 class="big" align="center">Who is comming:</h2>

    <p align="center">{{event.MaxEntries}} can participate.</p>
    <table>
      <tbody>
        <tr data-ng-repeat="entry in event.entries">
            <th>{{entry}}</th>
        </tr>
      </tbody>
    </table>
    <br/>
    <br/>
  </div>
</div>

Answer 1

如果人们仍然磕磕绊绊......

1。简单的对象列表

因此，如果您有一个动态填充的对象列表/对象，例如：

var list = [
               {key1: 'value1'},
               {key2: 'value2'}
           ]

未来会增加更多的关键值对（可能会推送到列表中）。

在这种情况下，表体将如此构造

     <tbody>
      <tr ng-repeat="obj in sobjs">
        <td ng-repeat="(key, value) in obj">
          {{key}}
        </td>
        <td ng-repeat="(key, value) in obj">
          {{value}}
        </td>
      </tr>
    </tbody>

2。这很简单。相反，如果你有一个更复杂的结构：

var list = [
  {'key1': [
      {
        'skey1':'sval11',
        'skey2':'sval12'
      },
      {
        'skey1': 'sval11a',
        'skey2': 'sval11b'
      }
    ]},
  {'key2': [
      {
        'skey1':'sval21',
        'skey2':'sval22'
      },
      {
        'skey1': 'sval21a',
        'skey2': 'sval21b'
      }
    ]}
]

在这种情况下，表体将如下构造：

    <tbody>
      <tr ng-repeat="obj in lobjs">
        <td ng-repeat="(key, value) in obj">
          {{key}}
        </td>
        <td ng-repeat="(key, value) in obj">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>
                  Sub-value 1
                </th>
                <th>
                  Sub-value 2
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="sobj in value">
                <td>
                  {{sobj.skey1}}
                </td>
                <td>
                  {{sobj.skey2}}
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>

Plunker工作代码：https://plnkr.co/edit/r4naGBaYAufhD073oXdw?p=preview

以下相同代码的代码段

function Ctrl($scope) {
  $scope.sobjs = [{
    'key1': 'value1'
  }, {
    'key2': 'value2'
  }]

  $scope.lobjs = [{
    'key1': [{
      'skey1': 'sval11',
      'skey2': 'sval12'
    }, {
      'skey1': 'sval11a',
      'skey2': 'sval11b'
    }]
  }, {
    'key2': [{
      'skey1': 'sval21',
      'skey2': 'sval22'
    }, {
      'skey1': 'sval21a',
      'skey2': 'sval21b'
    }]
  }]
}

<!DOCTYPE html>
<html ng-app="">

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="Ctrl">
    <h2>Simple List of Objects</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>
            Key
          </th>
          <th>
            Value
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in sobjs">
          <td ng-repeat="(key, value) in obj">
            {{key}}
          </td>
          <td ng-repeat="(key, value) in obj">
            {{value}}
          </td>
        </tr>
      </tbody>
    </table>

    <h2>List of Objects with a list of objects as values for each key</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>
            Key
          </th>
          <th>
            Value
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in lobjs">
          <td ng-repeat="(key, value) in obj">
            {{key}}
          </td>
          <td ng-repeat="(key, value) in obj">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>
                    Sub-value 1
                  </th>
                  <th>
                    Sub-value 2
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="sobj in value">
                  <td>
                    {{sobj.skey1}}
                  </td>
                  <td>
                    {{sobj.skey2}}
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Answer 2

编写一个数组数组，并将字段和值都保存为数组元素。像这样：

var sample = [ [ sampleField, sampleValue ], [ anotherSampleField , anotherSampleValue ] ];

现在您可以使用ng-repeat进行迭代：

<li ng-repeat = "index in sample"> index[0] : index[1]</li>

angularjs ng-repeat显示所有列表对象

2 个答案:

1。简单的对象列表

2。这很简单。相反，如果你有一个更复杂的结构：