2

Tenho a seguinte pagina usando angular, jquery e bootstrap:

var app = angular.module('tblModule', []);
app.controller('tblController', function($scope) {
  $scope.testes = [
    {
      "teste": 1,
      "oi": "O que \u00e9 a loren ipsum?",
      "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
    }, {
      "teste": 2,
      "oi": "Disclaimer sobre a loren ipsum?",
      "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
    }
  ]
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="man">
  <div class="container">
    <h1>Teste</h1>
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="tblModule" class="panel panel-default">
          <div ng-controller="tblController">
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#teste{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="teste{{ teste.teste }}" class="panel-collapse collapse">
                <div class="panel-body">{{ teste.ai }}</div>
                <p></p>
              </div>
              <p></p>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Puxo os dados do objeto teste do banco de dados usando ajax-$http do angular:

 $http({
      method: 'POST',
      url: '/api/teste/',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded"
      },
      data: $httpParamSerializerJQLike({
        variaveis
      })
      }).then(function(response) {
        $scope.teste = response.data
      }
 });

Procurei no SOen uma forma de renderizar o html que vem junto do banco de dados, la tem varias respostas, mas não estou conseguindo implementar nenhuma, creio que estou fazendo alguma coisa errada.

0

1 Resposta 1

2

É necessário incluir:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>

E então:

<div ng-bind-html="teste.ai" class="panel-body">{{ teste.ai }}</div>

Veja funcionando :

var app = angular.module('tblModule', ['ngSanitize']);
app.controller('tblController', function($scope) {
  $scope.testes = [
    {
      "teste": 1,
      "oi": "O que \u00e9 a loren ipsum?",
      "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
    }, {
      "teste": 2,
      "oi": "Disclaimer sobre a loren ipsum?",
      "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
    }
  ]
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="man">
  <div class="container">
    <h1>Teste</h1>
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="tblModule" class="panel panel-default">
          <div ng-controller="tblController">
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#teste{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="teste{{ teste.teste }}" class="panel-collapse collapse">
                <div ng-bind-html="teste.ai" class="panel-body">{{ teste.ai }}</div>
                <p></p>
              </div>
              <p></p>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
  • Te juro que tinha feito algo do tipo, e o texto simplesmente não apareceu rs Vou testar 4/02/2017 às 16:08

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 .