Question

我非常接近完成这个应用程序，但有最后一个障碍。我通过WordPress Rest API动态填充标签和数据，当我只有2个标签时，它运行得非常好，但是当我添加标签3和4时，我遇到了问题。当我单击选项卡2-4时，所有选项卡都会收到＆＃34;活动＆＃34;类而不仅仅是被点击的类;因此，还显示所有3个标签内容数据。

以下是代码：

＆＃13;

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, '') : '';
  };
});

＆＃13;

<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>

＆＃13;

我会喜欢任何想法！谢谢！

Answer 1

代码似乎有效，请参阅Fiddle。 menu_order的价值是多少？如果情况2-4的情况相同，那么就可以解释这种行为。

AngularJS每个标签的唯一标签数据

1 个答案: