javascript - 使用 Angular UI Bootstrap 制作轮播表单

Question

有人可以为我构建一个示例 ui.bootstrap 轮播吗，它有一个用于滑动的手动按钮，并包含两个 div 内容？我似乎无法弄清楚如何仅从他们的 example 中使用轮播。 .

到目前为止，我所拥有的内容如下。 (仅显示 Controller 和 .html 以保持整洁)

Controller

app.controller('RegisterController', function ($scope, $http, $location) {
    $scope.cancel = function () {
        $location.path('/');
    };

        $scope.myInterval = 5000; // I don't want timed-sliding. Only manual
        var slides = $scope.slides = [];
        $scope.addSlide = function () {
            slides.push({

            });
        };
        for (var i = 0; i < 4; i++) {
            $scope.addSlide();
        }

});

注册.html

<div>
    <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <div>{{slide.content}}</div>
        </slide>
        <button>Next</button>
    </carousel>
</div>

如果有人可以向我展示一个包含以下两个 div 的基本示例，那就太棒了!

幻灯片 1

<div>
   Name: <input type="text" />
</div>

幻灯片 2

<div>
   Password <input type="password" />
</div>

Answer 1

根据您实际想要实现的目标，轮播可能不适合您的要求。在这种情况下，就像 @donnanicolas 所说的那样，最好自行实现。

但不管它是否适合您的要求，这里有一个您要求的 super 基本示例:

<carousel interval="-1">
  <slide active="activeState[0]">
    <div>
      Name: <input type="text" />
    </div>
  </slide>
  <slide active="activeState[1]">
    <div>
      Password: <input type="password" />
    </div>
  </slide>
</carousel>
<button class="btn btn-default" ng-click="nextSlide()">Next</button>

在 Controller 中:

$scope.activeState = [true, false];

$scope.nextSlide = function () {
  var activeIndex = $scope.activeState.indexOf(true);
  if (activeIndex >= $scope.activeState.length - 1) {
    return; // already reached the last slide
  }

  $scope.activeState[activeIndex] = false;
  $scope.activeState[activeIndex + 1] = true;
};

Plunker 示例: http://plnkr.co/edit/44TMU4I9Di3vQKjkexBf?p=preview

希望这有帮助。