1

Olá! Estou fazendo um projeto para a faculdade no Ionic usando angularJS e nele tenho uma arraylist com várias palavras, usando o orderBy as deixei em ordem alfabética, mas tem um problema, preciso fazer com que toda vez que a letra inicial mude seja criado um list-divider com essa letra, por exemplo : "list-divider A, Amora, Amor, list-divider B, Batata, Bobão, list-divider C, Casa, Cachorro..."

Já consegui fazer isso transformando uma lista em várias listas e botando o divider entre elas, mas me foi dito que essa não é uma boa pratica.

1 Resposta 1

1

Uma das possibilidades é criar um objeto que separe as palavras em grupos.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .