角度 - 下一个标签按钮

时间:2015-10-27 16:04:50

标签: javascript angularjs tabs

使用此作为构建我的标签的基础

http://jsfiddle.net/jccrosby/eRGT8/light/

angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$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;
}
}])

目前正在尝试实施' Proceed'和'回去'选项卡按钮,而不是直接单击您要访问的那个。

想知道是否有可能实现像

这样的东西
$scope.nextButton = function(tab) {
    $scope.currentTab = $scope.tabs[tab].next.url
}

我希望放置下一个按钮的位置不在

ng-repeat='tab in tabs'

如此不确定如何传入当前标签!

任何帮助都会一如既往地受到赞赏。

1 个答案:

答案 0 :(得分:0)

您可以在以下小提琴中找到一个示例:

https://jsfiddle.net/wyyhpo9n/

哟ucan仍然可以提高它但你明白了

$scope.history = {};
$scope.history.tabs = [];
$scope.history.tabs.push($scope.currentTab);
$scope.history.index = 0;
$scope.history.maxIndex = 0;

$scope.previous = function() {
    if ($scope.history.index <= 0)
        return;
    $scope.history.index--;
    $scope.currentTab = $scope.history.tabs[$scope.history.index];
};
$scope.next = function() {      
    if ($scope.history.index === $scope.history.maxIndex)
       return;
    $scope.history.index++;
    $scope.currentTab = $scope.history.tabs[$scope.history.index];
};