Use NG-CLICK to change class on a clicked element

Question

I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.

I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.

 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> 

I am trying to add the class to the li element. I appreciate any help!

Answer 1

You can use ng-class like

<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>

For more options you can visit 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>

in your js

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

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