HTML tags showing in AngularJS

3 Views

I have an app which is pulling in data from another site using the WordPress plugin WP-API.

I’m suing AngularJS to then display this information, I’m really new to AngularJS so my problem is that the correct information is being pulled in from the posts but HTML tags are showing such as <p>text</p>.

Read More

I’m pulling in data like this (a snippet of my code)- 

<script>

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

        app.controller('aLlCtrl', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel';
        $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
</script>

<body ng-app="myApp">


            <!--SHOOTING TYPE-->


            <div id="All" class="descshoot">

                <div  ng-controller="aLlCtrl">
                  <div ng-repeat="d in data">
                    <h2 class="entry-title title-post">{{d.title}}</h2>
                    <div id="listing-image"><img src="{{d.acf.logo}}"></div>
                    <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
                    <div id="listing-address-1">
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
                    </div>
                    <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
                    <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
                    <div id="listing-email">Email: {{d.acf.email}}</div>
                    <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
                    <div id="listing-established">Established: {{d.acf.established}}</div>
                    <div id="listing-about">About: {{d.acf.about}}</div>
                    <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
                    <div id="listing-directions">Directions: {{d.acf.directions}}</div>
                    <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
                  </div>
                </div>
              </div>
</body>

And here is a (non-working) pen of my code – http://codepen.io/anon/pen/yePYdq and the site where it’s working http://dev.5874.co.uk/goshooting/regions/channel-islands/

Any help would be much appreciated,

Thanks!

Post Views: 3

Related posts

1 comment

  1. You need to use ng-bind-html attribute: JSFiddle

    DOCUMENTATION

    HTML:

    <div ng-app="myApp" ng-controller="myCtrl">
  {{test}} <!--will show '<p>test</p>'-->
  <div ng-bind="test"></div> <!--will show '<p>test</p>'-->
  <div ng-bind-html="test"></div> <!--will show 'test'-->
</div>

    JS:

    angular.module("myApp", ["ngSanitize"])
  .controller("myCtrl", function($scope) {
    $scope.test = "<p>test</p>";
  });

    Note: Don’t forget to include ngSanitize to your module.

Comments are closed.