Html ng repeat supprime repeat和表格式

我有一个这样的控制器：

var myApp = angular.module('myApp',[]);

myApp.controller('PreguntasCtrl', function($scope) {
  $scope.preguntas = 
  [
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "1",
    },
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "2",
    },
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "3",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "1",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "2",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "3",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "1",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "2",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "3",
    }    
  ]

});

<tr ng-repeat="obj in preguntas">        

    <td>
      <span ng-bind="obj.pregunta_id"></span>
    </td>

    <td>
      <span ng-bind="obj.pregunta"></span>
    </td>

    <td>
      <span ng-bind="obj.opcion"></span>
    </td>

</tr>

我使用ng repeat创建一个动态表，如下所示：

var myApp = angular.module('myApp',[]);

myApp.controller('PreguntasCtrl', function($scope) {
  $scope.preguntas = 
  [
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "1",
    },
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "2",
    },
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": "3",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "1",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "2",
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcion": "3",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "1",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "2",
    },
    {
        "pregunta_id": "3",
        "pregunta": "Pregunta C",
        "opcion": "3",
    }    
  ]

});

<tr ng-repeat="obj in preguntas">        

    <td>
      <span ng-bind="obj.pregunta_id"></span>
    </td>

    <td>
      <span ng-bind="obj.pregunta"></span>
    </td>

    <td>
      <span ng-bind="obj.opcion"></span>
    </td>

</tr>

但我需要创建下表：

<tr>
  <td>1</td>
  <td colspan="3">Pregunta A</td>          
</tr>
<tr>
  <td></td><td>1</td><td>2</td><td>3</td>
</tr>

<tr>
  <td>2</td>
  <td colspan="3">Pregunta D</td>          
</tr>
<tr>
  <td></td><td>1</td><td>2</td><td>3</td>
</tr>

<tr>
  <td>3</td>
  <td colspan="3">Pregunta C</td>          
</tr>
<tr>
  <td></td><td>1</td><td>2</td><td>3</td>
</tr>        

我需要一种方法来消除动态复制pregunta_id和pregunta的值

我只需要显示一次，而不是3次

看一看

它提供了一个过滤器来帮助对列进行分组，如下所示：

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

-

-

---

使用vanilla js或angular.forEach或lodash或任何最简单的方式将数据映射到pregunta分组的新结构中

<tr ng-repeat-start="obj in preguntas">
  <td ng-bind="obj.pregunta_id"></td>
  <td colspan="3" ng-bind="obj.pregunta></td>          
</tr>
<tr ng-repeat-end>
  <td ng-repeat="opcion in obj.opcions" ng-bind="opcion"></td>
</tr>