AngularJs创建表

Question

所以我想创建一个与此类似的表

使用此数据

$scope.data = [
   {question : 1, answer : a},
   {question : 1, answer : b},
   {question : 1, answer : c},
   {question : 2, answer : b},
   {question : 2, answer : a},
   {question : 3, answer : c},
]

到目前为止，这就是我所拥有的

<tbody ng-repeat="(key,value) in data" ng-init="current=null">
  <tr>
    <td><span ng-if="current != value.question">{{value.question}}</span></td>
    <td>{{value.answer}}</td>
    <td class="hidden">{{ current = value.question }}</td>
  </tr>
</tbody>

如果你能提供帮助并开导我，那就很高兴谢谢你！

Answer 1

数据中包含的是一个对象数组，您使用的语法循环对象而不是ng-repeat中的数组。

就这样改变：

<table>
  <thead>
    <th>Question#</th>
    <th>Answer#</th>
  </thead>
  <tbody ng-repeat="value in data" >
    <tr>
      <td><span>{{value.question}}</span></td>
      <td>{{value.answer}}</td>

    </tr>
  </tbody>
</table>

这是一个fiddle，可以让你继续前进。

Answer 2

首先修改$scope.data ::提供""密钥。 这是DEMO

$scope.data = [
   {"question" : 1, "answer" : "a"},
   {"question" : 1, "answer" : "b"},
   {"question" : 1, "answer" : "c"},
   {"question" : 2, "answer" : "b"},
   {"question" : 2, "answer" : "a"},
   {"question" : 3, "answer" : "c"}
]

查看： 而不是使用ng-if使用ng-show来维护表的结构。

<table>
 <tbody ng-repeat="(key,value) in data">
  <tr>
    <td ng-show="data[key-1].question != value.question">{{value.question}}</td>
    <td>{{value.answer}}</td>
    <td class="hidden">{{ current = value.question }}</td>
  </tr>
 </tbody>
</table>