JoethaCoder JoethaCoder - 1 year ago 173
AngularJS Question

Use NG-CLICK to change class on a clicked element

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.


var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("").then(function(response) {
$ =;
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);


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

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

Answer Source

You can use ng-class like

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

For more options you can visit

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download