Уникальные данные вкладки AngularJS для каждой вкладки

Question

Я довольно близок к завершению этого приложения, но у меня есть последнее препятствие. Я динамически заполняю вкладки и данные через API WordPress Rest, и когда у меня было только 2 вкладки, это работало чудесно, но когда я добавил вкладки 3 и 4, я столкнулся с проблемами. Когда я нажимаю вкладки 2-4, все вкладки получают «активный» класс, а не только тот, который был нажат; таким образом, также отображаются все данные содержимого 3 вкладок.

Вот код:

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('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 myData.data" ng-show="myData.tab === item.menu_order"> 
 
     <div class="copy_wrap"> 
 
     <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> 
 
     <div class="description" ng-repeat="field in item.acf.character_description"> 
 
      <p>{{field.description_paragraph}}</p> 
 
     </div> 
 
     <a href="{{ item.acf.character_page_link }}">Learn More</a> 
 
     </div> 
 
     <div class="image_wrap"> 
 
     <img src="{{ item.acf.homepage_full_image.url }}" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="char_tabs"> 
 
    <nav> 
 
     <ul ng-init="ch.tab = 0"> 
 
     <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 }}" /> 
 
      <div class="tab_title_wrap"> 
 
       <h3>{{ item.acf.characters_name }}</h3> 
 
      </div> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</section>

Я хотел бы любые идеи! Благодаря!

Answer 1

Код, похоже, работает, см. Fiddle. Каковы значения menu_order? Если они одинаковы для случаев 2-4, то это объясняет поведение.