Angularjs need to create a list-Divider in the middle of a list

Question

Hello! I am doing a project for the college in Ionic using Angularjs and in it I have an arraylist with several words, using the orderby I left them in alphabetical order, but I have a problem, I need to make every time the initial letter changes to be created a list-Divider with this letter, for example : "list-Divider A, Blackberry, Love, list-Divider B, Potato, Bobão, list-Divider C, Home, Puppy..."

I’ve been able to do this by turning a list into several lists and putting Dad between them, but I’ve been told that this is not a good practice.

Answer 1

One of the possibilities is to create an object that separates words into groups.

angular.module('myApp', [])
.controller('myController', function($scope){

  var palavras   = "Amora,Amor,Batata,Bobão,Casa,Cachorro"; // Conteúdo original
  var palavraCol = palavras.split(',');       // Transforma em uma coleção, 
                                              //   usando vírgula como separador

  var estrutura = {};                         // Preparando um objeto para conter divisores e conteúdo

  palavraCol.forEach(function(i){             // para cada palavra,
  
    var primLetra = i[0].toUpperCase();       // Obtenha a primeira letra, e a torne Maiúscula;
    
    if (!estrutura[primLetra])                // Se a estrura ainda não possuir o grupo, crie
        estrutura[primLetra] = [];            //   e inicialize como um array vazio.
  
    estrutura[primLetra].push(i);             // Adiciona a palavra atual ao grupo correspondente.
  
  });
  
  $scope.estrutura = estrutura;               // Armazena em $scope, para que a view possa acessar.
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
  
    <div ng-repeat="(k,v) in estrutura">
    Letra {{k}}
      <ul>
        <li ng-repeat="p in v">  
        {{p}}
        </li>
      </ul>
    </div>
    
    <pre>{{estrutura | json }}</pre>
  </div>
</div>