How can I add previous/next buttons/options/links in my example so that I can move forward and backward steps after clicking on those options as per requirement in my third tab for the given content using angularjs or javascript or jquery. I have created fiddle
-
2Where do you want to add previous/next button and where it will redirect youSanjeev– Sanjeev2015-12-16 05:31:37 +00:00Commented Dec 16, 2015 at 5:31
-
in my third tab, it is having couple of buttons(Test, Test1, etc). If we add previous/next options so that we can go forward and backward to display it's content in the same tab.Dhana– Dhana2015-12-16 05:33:53 +00:00Commented Dec 16, 2015 at 5:33
-
Editted fiddle: jsfiddle.net/mavdhana/6qm7jeo3/3Dhana– Dhana2015-12-16 05:41:04 +00:00Commented Dec 16, 2015 at 5:41
Add a comment
|
2 Answers
Are you looking for such behavior:
http://jsfiddle.net/6qm7jeo3/5/
I have added a prev and next function. Please have a look at it.
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', '$location', function($scope, $location) {
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.tab3 = 0;
$scope.next = function() {
$scope.tab3 = $scope.tab3 + 1;
}
$scope.prev = function() {
$scope.tab3 = $scope.tab3 - 1;
}
}]);
1 Comment
Dhana
Thanks for your reply. Yes this is what I am looking for.
Here is the updated fiddle
<ul>
<li class="navBack" ng-click="navBack()"></li>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
<li class="navNext" ng-click="navNext()"></li>
</ul>
In Controller:
$scope.index = 0;
$scope.navBack = function(tab) {
if($scope.index > 0)
{
$scope.index--;
}
$scope.currentTab = $scope.tabs[$scope.index].url;
}
$scope.navNext = function() {
if( $scope.index < ($scope.tabs.length-1))
{
$scope.index++;
}
$scope.currentTab = $scope.tabs[$scope.index].url;
}
