Lucas Müller Lucas Müller - 5 months ago 20
JSON Question

HTML in Json with AngularJS

i'm building a App with Ionic that uses AngularJS.
So, with the API on link http://lucassmuller.com/work/projetoblog/api.php?action=posts I want to show the content ('conteudo') of the post in a page of my App but show that like this example:

<p><strong>Você tem um site e deseja um certificado SSL gratuitamente?<\/strong><\/p>\r\n\r\n<p>Se a resposta é sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let’s Encrypt, que é uma nova “Autoridade de Certificação” que é grátis, automatizada e aberta para todos.<\/p>\r\n\r\n<p>O nome dessa ferramenta é “<strong>SSL For Free<\/strong>” ou, em português, SSL gratuito. Este novo serviço é 100% grátis, e confiado e aceito pela maioria dos navegadores.<\/p>\r\n\r\n<p>Para começar, basta acessar o site da ferramenta <a href="https:\/\/www.sslforfree.com" target="_blank">clicando aqui<\/a> e após o acesso, digitar o domínio do seu site no campo que diz...


And the output:

Você tem um site e deseja um certificado SSL gratuitamente? Se a resposta é sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let’s Encrypt, que é uma nova “Autoridade de Certificação” que é grátis, automatizada e aberta para todos. O nome dessa ferramenta é “SSL For Free” ou, em português, SSL gratuito. Este novo serviço é 100%...

Answer

Here's is a snippet working:

var app = angular.module('app', ['ngSanitize']);

app.controller('mainCtrl', function($scope) {
  $scope.test = replace_chars('<p><strong>Você tem um site e deseja um certificado SSL gratuitamente?<\/strong><\/p>\r\n\r\n<p>Se a resposta é sim, eu tenho uma ferramenta que lhe oferece um certificado SSL gratuitamente usando o Let’s Encrypt, que é uma nova “Autoridade de Certificação” que é grátis, automatizada e aberta para todos.<\/p>\r\n\r\n<p>O nome dessa ferramenta é “<strong>SSL For Free<\/strong>” ou, em português, SSL gratuito. Este novo serviço é 100% grátis, e confiado e aceito pela maioria dos navegadores.<\/p>\r\n\r\n<p>Para começar, basta acessar o site da ferramenta <a href="https:\/\/www.sslforfree.com" target="_blank">clicando aqui<\/a> e após o acesso, digitar o domínio do seu site no campo que diz...');

  function replace_chars(input) {
    return input.replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&amp;/g, '&');
  }
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js"></script>
</head>
<body ng-controller="mainCtrl">
  <div>
    <span ng-bind-html="test"></span>
  </div>
</body>
</html>

Comments