JoethaCoder JoethaCoder - 9 months ago 52
AngularJS Question

AngularJS unique tab data for each tab

I am pretty close to having this app finished, but have one last hurdle. I am dynamically populating tabs and data via the WordPress Rest API and when I only had 2 tabs it worked wonderfully, but when I added tab 3 and 4 I ran into issues. When I click tabs 2-4 all tabs receive the "active" class instead of just the one that was clicked; thus also all 3 tabs content data also displays.

Here is the code:

var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("").then(function(response) {
$ =;
homeApp.filter('stripTags', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';

<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy">
<h3>Meet the Characters</h3>
<div class="char_inject" ng-repeat="item in" ng-show=" === item.menu_order">
<div class="copy_wrap">
<h3>{{ }}:</h3>
<h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
<p class="hero_type">{{ item.acf.hero_type }}</p>
<div class="description" ng-repeat="field in item.acf.character_description">
<a href="{{ item.acf.character_page_link }}">Learn More</a>
<div class="image_wrap">
<img src="{{ item.acf.homepage_full_image.url }}" />
<div class="char_tabs">
<ul ng-init=" = 0">
<li class="tab" ng-repeat="item in" ng-class="{'active' : item.menu_order ==}">
<a href ng-click=" = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<div class="tab_title_wrap">
<h3>{{ item.acf.characters_name }}</h3>

I would love any ideas! Thanks!

Answer Source

The code seems to work, see Fiddle. What are the values of menu_order? If they are the same for cases 2-4, then that would explain the behaviour.