Question

美好的一天，我有一个旋转木马。我需要循环并在每次迭代时显示3列。基本上，在下面的例子中，我有一组图像。我需要每次显示三张图片及其信息所以显示1 2 3然后4 5 6然后7 8 ...所以每次迭代设置3个图像

＆＃13;

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <div class=row>
          <div class=col-xs-4>
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{$index}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </div>
          <div class=col-xs-4>
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{$index+1}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </div>
          <div class=col-xs-4>
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{$index+2}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </div>
        </div>
      </slide>
    </carousel>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br />Enter a negative number or 0 to stop the interval.
    </div>
  </div>
</div>
  </body>
</html>

＆＃13;

Answer 1

class API::V1::SubmissionsController < ApplicationController
  def index
   @submissions = Submission.all
   render json: @submissions, status: :ok
  end
end

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };


var currentIndex = 0;
// this is really ugly. don't try this at home, kids.
setTimeout(function () {
    var directiveScope = angular.element(document.querySelector('.carousel-inner')).scope();
    directiveScope.next = function() {
        var newIndex = (currentIndex + 3) % directiveScope.slides.length;
        currentIndex = newIndex;

        //Prevent this user-triggered transition from occurring if there is already one in progress
        if (!directiveScope.$currentTransition) {
            return directiveScope.select(directiveScope.slides[newIndex], 'next');
        }
    };
}, 100);
  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});

有角度js的三列旋转木马

1 个答案: