Angular http data displaying in one div but not the other

Question

I am using ng-repeat to print a list of posts to the page via the WordPress REST-API. I am using Advanced Custom Fields on each post. From what I can see everything is working, but the post data is not showing in one container, yet it is displaying in another. I should also mention that this is set up like tabs. (user clicks a tab for a post and it displays that posts data)

   var homeApp = angular.module('homeCharacters', ['ngSanitize']);
   homeApp.controller('characters', function($scope, $http) {
     $scope.myData = {
       tab: 0
     }; //set default tab
     $http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
       $scope.myData.data = response.data;
     });
   });
   homeApp.filter('toTrusted', ['$sce',
     function($sce) {
       return function(text) {
         return $sce.trustAsHtml(text);
       };
     }
   ]);

HTML:

<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
  <div class="char_copy">
    <h3>Meet the Characters</h3>
    <div ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
      <!--this is the section that will not display-->
      <h3>{{ item.acf.team }}</h3>
      <h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
      <p class="hero_type">{{ item.acf.hero_type }}</p>
      {{ item.acf.description }}
      <a href="{{ item.acf.character_page_link }}">Learn More</a>
    </div>
  </div>
  <div class="char_tabs">
    <!--if I put the identical {{}} in this section it WILL display-->
    <nav>
      <ul ng-init="myData.tab = 0" ng-model='clicked'>
        <li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <h3>{{ item.title }}</h3>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

I should also mention that I use Ng-inspector, and it does show the data being pulled in. I can confirm this via the console. I have checked to ensure no css is in play; the div is totally empty in the DOM.

I appreciate all the help the GREAT angular community has shown!

Pankaj Parkar · Accepted Answer · 2016-10-26 19:37:18Z

1

The problem is you had used ng-bind-html over ng-repeat element which is changing the inner content of ng-repeat div. I guess as you have inner transcluded template inside ng-repeat directive, you should not be using ng-bind-html there in a place.

Markup

<div ng-repeat="item in myData.data" ng-show="myData.tab === item.menu_order">
  <!--this is the section that will not display-->
  <h3>{{ item.acf.team }}</h3>
  <h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
  <p class="hero_type">{{ item.acf.hero_type }}</p>
  {{ item.acf.description }}
  <a href="{{ item.acf.character_page_link }}">Learn More</a>
</div>

answered Oct 26, 2016 at 19:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JoethaCoder Over a year ago

My concern here is that there is some html formatted data coming from WordPress....if I did this how would I overcome the html?

JoethaCoder Over a year ago

Sorry I am not sure I fully understand. How would I remove the <p> tags then for example in the rendered data?

Pankaj Parkar Over a year ago

why you wanted to remove p tag? explain me what exactly you needed?

JoethaCoder Over a year ago

The <p> tag is actually showing up as plain text. So the text on the front end is: <p>this is text</p> instead of: this is text

JoethaCoder Over a year ago

Actually nevermind! I found this post and it worked! coffeecupweb.com/how-to-strip-html-tags-in-angularjs

Collectives™ on Stack Overflow

Angular http data displaying in one div but not the other

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related