I have the following page using angular , jquery and 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><scriptsrc="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><sectionclass="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> I pull data from the test object of the database using ajax-$http of 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
}
});
I searched the SOen for a way to render the html that comes with the database, it has several answers, but I can not implement any, I think I'm doing something wrong.