如何使用angularjs或javascript添加上一个/下一个选项

How to add previous/next options using angularjs or javascript?

本文关键字：上一个 下一个 选项 添加 javascript 何使用 angularjs      更新时间：2023-09-26

如何在我的示例中添加previous/next按钮/选项/链接，以便在使用angularjs或javascript或者jquery的给定内容的第三个选项卡中，根据要求单击这些选项后，可以向前和向后移动步骤。我已经创建了fiddle

你在寻找这样的行为吗：

http://jsfiddle.net/6qm7jeo3/5/

我添加了一个prev和next函数。请看一下。

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;
    }

  }]);

这是更新的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;
}
相关文章：