July 11, 2018
Dynamically Set navbar active tab angularjs ngclass
Dynamically Set navbar active tab angularjs ngclass
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For
Setting active tab on dynamically created tabs with Angularjs
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-app="infinityknowApp" ng-controller="tabCtrl">
<ul class="nav nav-tabs">
<li ng-class="{'active' : activeTab == 1}"><a href="" ng-click="setDataTabs(1)">Home</a></li>
<li ng-class="{'active' : activeTab == 2}"><a href="" ng-click="setDataTabs(2)">Profile</a></li>
<li ng-class="{'active' : activeTab == 3}"><a href="" ng-click="setDataTabs(3)">About us</a></li>
<li ng-class="{'active' : activeTab == 4}"><a href="" ng-click="setDataTabs(4)">Contact us</a></li>
<li ng-class="{'active' : activeTab == 5}"><a href="" ng-click="setDataTabs(5)">site map</a></li>
<li ng-class="{'active' : activeTab == 6}"><a href="" ng-click="setDataTabs(6)">faq</a></li>
<li ng-class="{'active' : activeTab == 7}"><a href="" ng-click="setDataTabs(7)">Feedback</a></li>
</ul>
<div class="tab-content">
<div ng-class="{'tab-pane active': activeTab === 1, 'tab-pane' : activeTab !== 1}">Panel 1 Content</div>
<div ng-class="{'tab-pane active': activeTab === 2, 'tab-pane' : activeTab !== 2}">Panel 2 Content</div>
<div ng-class="{'tab-pane active': activeTab === 3, 'tab-pane' : activeTab !== 3}">Panel 3 Content</div>
<div ng-class="{'tab-pane active': activeTab === 4, 'tab-pane' : activeTab !== 4}">Panel 4 Content</div>
<div ng-class="{'tab-pane active': activeTab === 5, 'tab-pane' : activeTab !== 5}">Panel 5 Content</div>
<div ng-class="{'tab-pane active': activeTab === 6, 'tab-pane' : activeTab !== 6}">Panel 6 Content</div>
<div ng-class="{'tab-pane active': activeTab === 7, 'tab-pane' : activeTab !== 7}">Panel 7 Content</div>
</div>
<div>
<p>
<ul>
<li>Set active tab style with AngularJS</li>
<li>Setting active tab on dynamically created tabs with Angular UI Bootstrap</li>
<li>Tabs in AngularJS | Working with tabs</li>
<li>Tab Panel with Angular</li>
<li>Simple Tab Controls in AngularJS</li>
<li>Tab example in AngularJS</li>
<li>Tabs AngularJS</li>
<li>Tutorial Tabs</li>
<li>AngularJS Tab</li>
<li>Tutorial AngularJS Tabs</li>
<li>Tutorial on tabs in angularJS explained with example</li>
<li>Tab control with ng-hide</li>
<li>ng-show and ng-click</li>
<li>AngularJS - Tab control with ng-hide</li>
<li>ng-show and ng-click</li>
<li>Dynamic Tabs with AngularJS and UI Bootstrap</li>
<li>angularjs tab example</li>
<li>angularjs bootstrap tabs example</li>
<li>angularjs bootstrap tab directive</li>
<li>tab using angularjs</li>
<li>angularjs tab navigation example</li>
<li>angularjs tab control example</li>
<li>angularjs tabs ng-include</li>
</ul>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("infinityknowApp", [])
.controller("tabCtrl", ['$scope', function($scope) {
$scope.activeTab = 1;
$scope.setDataTabs = function(tabname) {
$scope.activeTab = tabname;
}
}]);
</script>
</body>
</html>
We hope you get an idea about Dynamically Set navbar active tab angularjs ngclass
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.
Post Views:
452
Related Posts
Autocomplete multiselect directive select values using angularjs
AngularJS Router Nested views with Nested states
