Sou novo no Angular e gostaria de aprender a melhor maneira de lidar com um problema. Meu objetivo é ter um meio reutilizável para criar grupos por cabeçalhos. Eu criei uma solução que funciona, mas acho que isso deve ser uma diretiva em vez de uma função de escopo dentro do meu controlador, mas não tenho certeza de como fazer isso, ou se uma diretiva é mesmo o caminho certo a seguir. Qualquer entrada seria muito apreciada.

Veja minha abordagem atual trabalhando emjsFiddle

No HTML é uma lista simples usando ng-repeat onde eu chamo a minha função newGrouping () no ng-show. A função passa uma referência para a lista completa, o campo pelo qual desejo agrupar e o índice atual.

<div ng-app>
<div ng-controller='TestGroupingCtlr'>
    <div ng-repeat='item in MyList'>
        <div ng-show="newGrouping($parent.MyList, 'GroupByFieldName', $index);">
            <h2>{{item.GroupByFieldName}}</h2>
        </div>
        {{item.whatever}}
    </div>
</div>
</div>

No meu controlador eu tenho minha função newGrouping () que simplesmente compara a atual com a anterior, exceto no primeiro item, e retorna verdadeiro ou falso, dependendo de uma correspondência.

function TestGroupingCtlr($scope) {

  $scope.MyList = [
    {GroupByFieldName:'Group 1', whatever:'abc'},
    {GroupByFieldName:'Group 1', whatever:'def'},
    {GroupByFieldName:'Group 2', whatever:'ghi'},
    {GroupByFieldName:'Group 2', whatever:'jkl'},
    {GroupByFieldName:'Group 2', whatever:'mno'}
  ];

  $scope.newGrouping = function(group_list, group_by, index) {
  if (index > 0) {
    prev = index - 1;
    if (group_list[prev][group_by] !== group_list[index][group_by]) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
  };
}

A saída ficará assim.

Grupo 1

abcdef

Grupo 2

ghijklmno

Parece que deveria haver um caminho melhor. Eu quero que isso seja uma função de utilidade comum que eu possa reutilizar. Isso deveria ser uma diretriz? Existe uma maneira melhor de referenciar o item anterior na lista do que meu método de passar a lista completa e o índice atual? Como eu abordaria uma diretiva para isso?

Qualquer conselho é muito apreciado.

UPDATE: Procurando por uma resposta que não exija dependências externas. Existem boas soluções usando sublinhado / lodash ou o módulo de filtro angular.

Darryl