How to group ng-repeat in Angularjs

Question

I need to group the Class field and list the tasks that exist, but I can’t do that with Angularjs.

Here is my view:

<div class="row">
    <div class="col-md-12">
        <div ng-controller="atividadesDisciplinaController">
            <table class="table table-bordered table-condensed table-hover table-striped">
                <thead>
                <tr>
                    <th>Recurso</th>
                    <th>Visualizações</th>
                    <th>Interações</th>
                    <th>Último Acesso</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="x in disciplinas">
                    <td>@{{ x.recurso }}</td>
                    <td>@{{ x.visualizacao }}</td>
                    <td>@{{ x.interacao }}</td>
                    <td>@{{ x.ultimo_acesso }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Here I list the Controller that receives a JSON:

<script>
    app.controller('atividadesDisciplinaController', function($scope, $http) {
        $http.post("/disciplina/{{ $slug }}/relatorios/{{$relatorio}}")
            .then(function (response) {$scope.disciplinas = response.data;});
    });
</script>

Today you’re listing it as.

And I need you to stay more or less like this

I tested using Angularjs documentation:

<tr ng-repeat="x in disciplinas | groupBy: 'aula'">
    <td>@{{ x.recurso }}</td>
    <td>@{{ x.visualizacao }}</td>
    <td>@{{ x.interacao }}</td>
    <td>@{{ x.ultimo_acesso }}</td>
</tr>

And a mistake returns:

Unknown provider: groupByFilterProvider <- groupByFilter

Answer 1

You can use the Angular-filter as a complement to your project and accomplish what you want with two ng-repeat:

angular
  .module('ModuloTabelas', ['angular.filter'])
  .controller('ControllerTabelas', ControllerTabelas);

ControllerTabelas.$inject = [];

function ControllerTabelas() {
  var tabelas = this;
  tabelas.disciplinas = [];

  iniciar();

  function iniciar() {
    tabelas.disciplinas.push({
      aula: 'Aula 1',
      recurso: 'Primeiro',
      visualizacao: 2,
      interacao: 1,
      ultimo_acesso: 'xxxx'
    });
    
    tabelas.disciplinas.push({
      aula: 'Aula 1',
      recurso: 'Segundo',
      visualizacao: 0,
      interacao: 1,
      ultimo_acesso: 'xxxx'
    });
    
    tabelas.disciplinas.push({
      aula: 'Aula 2',
      recurso: 'Terceiro',
      visualizacao: 2,
      interacao: 1,
      ultimo_acesso: 'xxxx'
    });
    
    tabelas.disciplinas.push({
      aula: 'Aula 2',
      recurso: 'Quarto',
      visualizacao: 2,
      interacao: 1,
      ultimo_acesso: 'xxxx'
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div ng-app="ModuloTabelas">
  <div class="row">
    <div class="col-md-12">
      <div ng-controller="ControllerTabelas as tabelas">
        <table class="table table-bordered table-condensed table-hover table-striped">
          <thead>
            <tr>
              <th>Recurso</th>
              <th>Visualizações</th>
              <th>Interações</th>
              <th>Último Acesso</th>
            </tr>
          </thead>
          <tbody ng-repeat="(key, value) in tabelas.disciplinas | groupBy: 'aula'">
            <tr><td colspan="4">{{ key }}</td></tr>
            <li ng-repeat="player in value">
              player: {{ player.name }} 
            </li>
            <tr ng-repeat="x in value">
              <td>{{ x.recurso }}</td>
              <td>{{ x.visualizacao }}</td>
              <td>{{ x.interacao }}</td>
              <td>{{ x.ultimo_acesso }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>