AngularJS各タブの固有のタブデータ

私はこのアプリを完成させるのにはかなり近いですが、最後のハードルが1つあります。私はWordPress Rest APIを介してタブとデータを動的に入力しています。タブが2つしかないときはうまく機能しましたが、タブ3と4を追加したときに問題が発生しました。タブ2-4をクリックすると、すべてのタブが、クリックされたタブだけでなく、アクティブなクラスを受け取ります。 3つのタブのコンテンツデータもすべて表示されます。AngularJS各タブの固有のタブデータ

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>

私はどんなアイデアが大好きになります。ここでは

は、コードです！ありがとう！

出典

2016-10-27 JoethaCoder