AngularJS I need to create a list-divider in the middle of a list

Question

AngularJS I need to create a list-divider in the middle of a list

Navigation

#1 by (1 votes)

1

Hello! I'm doing a project for 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 there is a problem, I have to make every time the initial letter changes a list- divider with that letter, for example: "list-divider A, Amora, Love, list-divider B, Potato, Bobon, list-divider C, House, Dog ..."

I've been able to do this by turning a list into multiple lists and putting the divider between them, but I've been told that this is not a good practice.

javascript angularjs ionic

asked by anonymous 30.06.2017 / 03:03

1 answer

I can not send files to the project in github 'innerHTML' undefined

score 1 · Accepted Answer

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