使用Angular UI Bootstrap制作轮播表单

Question

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

到目前为止，我所拥有的只是以下内容。 （ 仅显示控制器和.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>

如果有人可以向我展示一个基本示例，其中包括以下两个非常棒的div ！

幻灯片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;
};

柱塞示例： http ://plnkr.co/edit/44TMU4I9Di3vQKjkexBf?p=preview

希望这可以帮助。

Answer 2

我不建议为此使用角度ui引导程序，因为它们的轮播是指令 ，它应该与控制器没有关系。 您应该编写自己的代码。 您可以看一下他们的代码，看看如何计算大小以及所有这些。

编辑正如评论中所说，在角度ui引导程序中没有事件。