Question

我有一个像这样的控制器：

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",
    }    
  ]

});

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

<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次

Answer 1

看看angular-filter's groupBy。

它提供了一个过滤器来帮助对这些列进行分组：

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

-

<ul>
  <li ng-repeat="(key, value) in players | groupBy: 'team'">
    Group name: {{ key }}
    <ul>
      <li ng-repeat="player in value">
        player: {{ player.name }}
      </li>
    </ul>
  </li>
</ul>
<!-- result:
  Group name: alpha
    * player: Gene
  Group name: beta
    * player: George
    * player: Paula
  Group name: gamma
    * player: Steve
    * player: Scruath
-->

否则你必须自己映射数据：

$scope.preguntas = 
  [
    {
        "pregunta_id": "1",
        "pregunta": "Pregunta A",
        "opcion": ["1", "2", "3"]
    },
    {
        "pregunta_id": "2",
        "pregunta": "Pregunta B",
        "opcions": ["1", "2", "3"]
    }
];

-

<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>

ng-repeat suprime复制和表格式

1 个答案: