0

Tenho uma aplicação que recebe um texto gigante do banco de dados.

Quero exibir apenas o primeiro parágrafo e colocar um texto dizendo "VEJA DESCRIÇÃO COMPLETA" logo abaixo e quando clicar abrir em um modal ou mesmo na div em que está o restante do texto. Ainda não tenho nada de código.

4
  • O que você define como parágrafo?
    – Jéf Bueno
    Commented 24/03/2017 às 18:29
  • gigante = quantos caracteres?
    – OnoSendai
    Commented 24/03/2017 às 18:29
  • em tags html, assim>: <p></p> Commented 24/03/2017 às 18:30
  • Saquei. E esse "veja descrição completa" vai fazer outra requisição pro servidor? Porque, se sim, seria melhor receber o texto já cortado do server-side, né?
    – Jéf Bueno
    Commented 24/03/2017 às 18:35

1 Resposta 1

1

utilize uma mistura de Angular com CSS.

No exemplo abaixo, $scope.compacto controla o modo de visualização.

ng-class="{'compact': compacto}" faz com que a classe css compact seja adicionada ao elemento caso o valor de $scope.compacto seja true.

Utilize text-overflow: ellipsis para indicar ao usuário que existe mais texto disponível.

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

  $scope.compacto = true;
  
  $scope.toggle = function(){
    $scope.compacto = !$scope.compacto;
    console.log($scope.compacto);
  }
  
  $scope.texto = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque lacus accumsan sodales consequat. Aenean eleifend nunc nec sapien dictum, eu dictum augue lobortis. Cras egestas dapibus ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae libero vitae lorem ullamcorper convallis. Proin vel arcu a sem congue semper et at est. Nulla euismod massa in turpis sodales, et dictum felis eleifend. Cras eget eros a purus consectetur congue sed in nisl.

Integer lectus sapien, faucibus at nibh id, venenatis suscipit orci. Sed et placerat mauris. Sed blandit arcu vitae massa pulvinar, non lobortis velit pellentesque. Quisque in mauris ac ligula venenatis mattis. Integer at condimentum mauris. Duis molestie ac leo eget efficitur. Maecenas viverra mauris erat, ac congue nisl finibus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum nibh sit amet blandit. Aliquam eu arcu tristique justo tempus accumsan nec vehicula libero.

Ut vitae congue quam. Aenean ac tristique nibh. Morbi condimentum ex non orci vulputate, sed semper orci cursus. Morbi eget justo ligula. Nunc tempor justo eu nisi malesuada, vitae viverra arcu vestibulum. Cras id cursus libero, vitae imperdiet diam. Curabitur mollis quam dolor, vel malesuada leo facilisis in. Nunc vitae mattis lacus, et sodales nisi.

Vivamus maximus, sem a facilisis dictum, ligula enim maximus tortor, vitae egestas ex sem vitae justo. Curabitur fringilla tempus nisi, et commodo leo feugiat ac. Aliquam pretium in felis a tincidunt. Fusce porta, sapien vitae facilisis pretium, mauris sapien suscipit dui, vel fringilla diam nisi sit amet sapien. Aliquam sed leo ac mi porta vehicula a sed sem. Duis molestie erat nec nibh finibus, ac interdum diam varius. Maecenas dolor purus, vestibulum in imperdiet et, pellentesque at ipsum. Donec euismod lectus a ullamcorper aliquet.

Cras laoreet enim ut ligula rutrum fringilla. Quisque urna metus, consectetur eget leo ut, fringilla ultrices magna. Aenean suscipit mauris vitae pulvinar sagittis. Nunc augue purus, cursus facilisis enim vel, sollicitudin interdum tortor. Donec eget mattis libero, quis imperdiet purus. Quisque non sem nec elit elementum consectetur. Aenean quis enim gravida, aliquam ligula a, malesuada arcu. Curabitur quam ante, finibus vitae eros nec, gravida suscipit dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida non felis feugiat pulvinar. Fusce aliquet nunc ante, et congue orci pretium at. Nam id elit congue mi vehicula dignissim. Donec sapien justo, vestibulum vel ultrices ut, rhoncus quis justo. Proin commodo suscipit massa eget placerat. Nunc nec gravida turpis, sit amet consequat enim. Nam posuere, dui placerat tempor finibus, lorem velit vehicula enim, et sodales nibh nunc vitae erat.`;
});
.container {
  max-width:300px;
  border:1px solid black;
  padding:4px;
}

.compact {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
<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 class='container' ng-class="{'compact': compacto}" ng-click="toggle()">
    {{texto}}
    </div>
  </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 .