CODEWITHSUNDEEP
javascripthtmlarraysangularjsjson
karthick ravindranath
karthick ravindranath

Reputation: 97

Add active class to nav link for first JSON data Object initially using Angular JS

Add active class to the nav link for the first JSON object which is initially shown before selecting any nav link.

https://embed.plnkr.co/cI2QXbUgtnbwH5qe5CKj/

My HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RichMedia Portfolio</title>
<link href="style.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="richPortfolio">



<div class="container" ng-controller="adsCtrl">
    <nav>
        <ul class="accordion" onclick="myFunction(event)">
            <li ng-repeat="ad in ads">
                <a class="ad" href="" id="ad{{ ad.id }}" ng-click="select(ad)">{{ ad.title }}</a>
            </li>
        </ul>
    </nav>
    <div class="showCase_container">
        <div id="ad{{ selectedItem.id }}Case" class="adActive">
            <div class="description">
                <h3 class="ad_name">{{ selectedItem.title }}</h3>
                <p>{{selectedItem.content}}</p>
                <hr>
                <h3>Description</h3>
                <p>{{ selectedItem.desc }}</p>
                <hr>
                <h3>Dimension</h3>
                <p>{{ selectedItem.dim }}</p>
            </div>
        </div>
    </div>
</div>
<script src="rich.js"></script>
</body>
</html>

My Js:

// Modules

var rich = angular.module('richPortfolio', ['ngRoute']);

rich.config(function($routeProvider){
    $routeProvider
        .when('/', {
            controller: 'adsCtrl',
            templateUrl: 'pages/home.html'
        })
        .otherwise({ redirectTo: '/' });
});

// controllers

rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
    ads.then(function(data){
        $scope.ads = data;
        $scope.selectedItem = data[0];
    });

    // nav redirection
    $scope.select = function(item) {
        $scope.selectedItem = item;  
    };

}]);

//services

rich.factory('ads', ['$http', function($http){

    // after v1.6 need to use .then function to get it worked
    return $http.get('ads.json')
            .then(function(response){
                //alert('success');
                return data = response.data;
            },function(error){
                //alert('error');
            });

}]);

function myFunction(e) {
  var elems = document.querySelector(".accordion .active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

My JSON:

[
  {
    "id": "1",
    "title": "cube",
    "content": "cube 1 cube",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250"
  },
  {
    "id": "2",
    "title": "Gallery",
    "content": "Gallery 2 Gallery",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250, 300x600, 728x90, 970x250"
  }
]

All I need is to add the active class to the title of the initial JSON object data at the nav bar. https://embed.plnkr.co/cI2QXbUgtnbwH5qe5CKj/

Any Help would be appreciated.

Upvotes: 0

Views: 504

Answers (1)

deepica
deepica

Reputation: 122

you can use ng-class with index to make first tab active like below syntax <li ng-repeat="ad in ads" ng-class="{'active':$index===0}></li>

Upvotes: 1

Related Questions