クリックした要素のクラスを変更するにはNG-CLICKを使用してください

Question

WordPress REST-API経由でロードされたajaxデータを使用して動的タブを作成しています。すべてが機能していますが、アクティブなタブにCSSトランスフォームを使用するためにクラスを追加する必要があります。

私はどんな提案もありがとう。ある要素をクリックしたときに別の要素に影響するが、クリックされた要素に影響を与えるときには、ng-classを使用する方法は分かっている。また、ng-controllerの構文として 'as'を使用しています。

JAVASCRIPT: 
 

 
    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: 
 

 
<div class="more_comics_mobile"><a href="javascript:void(0)">More Comics <img src="./images/white-arrow.png" /></a> 
 
</div> 
 
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData"> 
 
    <div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order"> 
 
    {{ item.content }} 
 
    </div> 
 
    <div class="char_tabs"> 
 
    <nav> 
 
     <ul ng-init="myData.tab = 0" ng-model='clicked'> 
 
     <li class="tab" ng-repeat="item in myData.data"> 
 
      <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>

私はli要素にクラスを追加しようとしています。私は助けていただきありがとうございます！

Answer 1

あなたは https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

<div class="more_comics_mobile"><a href="javascript:void(0)">More Comics <img src="./images/white-arrow.png" /></a> 
</div> 
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData"> 
    <div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order"> 
    {{ item.content }} 
    </div> 
    <div class="char_tabs"> 
    <nav> 
     <ul ng-init="myData.tab = 0" ng-model='clicked'> 
     <li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data"> 
      <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> 

あなたのjsの中

$scope.activate = function(index){ 
     document.getElementsByClassName.setAttribute("class","tab"); 

     document.getElementsByClassName[index].setAttribute("class","tab active"); 
}