使用 Angular UI Bootstrap 制作轮播表单

Question

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

到目前为止，我所拥有的只有以下内容。 （只显示控制器和 .html 以保证整洁）

控制器

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

});

Registration.html

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

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

幻灯片 1

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

幻灯片 2

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

Answer 1

根据您实际尝试实现的目标，carousel 可能不适合您的要求。在这种情况下，就像@donnanicolas 所说，最好推出自己的实现。

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

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

在控制器中：

$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

希望这会有所帮助。

Answer 2

我不建议为此使用 angular ui bootstrap，他们的轮播是一个指令，它应该与控制器没有关系。您应该编写自己的代码。您可以查看他们的代码以了解如何计算大小以及所有这些。

编辑 正如在 cmets 中所说，angular ui bootstrap 中没有事件。