使用角度 Js 的引导网格轮播滑块

Question

我有大约 20 个结果。我想在平板电脑模式下显示 2 行，每行有 4 个网格，我想从左向右滑动网格（旋转木马）。如何使用 AngularJS 做到这一点？

<div class="margin-25">
    <div ng-repeat="customer in customerData" class="col-sm-3">
      <div class="well">

          <a href="profile.html">
              <div class="col-sm-4">
                <div class="text-center">
                    <img src="../app/imgs/photo.jpg" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
                    <div class="m-t-xs font-bold">{{customer.customerName}}</div>
                </div>
              </div>
              <div class="col-sm-8">              
                  <h4><strong>{{customer.CustomerNumber}}</strong></h4>
                  <address>                
                      {{customer.branch.address}}<br>
                      {{customer.branch.city}}<br>                
                  </address>
              </div>
              <div class="clearfix"></div>
            </a>           
      </div>
    </div>
  </div>

谁能提出最好的例子或任何方法来做到这一点？

Answer 1

这可能不是最漂亮的方法，但无论customerData 的大小如何，现在都可以动态生成幻灯片。我使用来自This Post 的filter 在幻灯片更改时跟踪客户。

  <carousel interval="myInterval" no-wrap="noWrapSlides">

    <slide active="slide.active" ng-repeat="slide in customerData | limitTo: slideLength track by $index">
     <div class="col-sm-3" ng-repeat="customer in customerData | startFrom: ($index*8) | limitTo: 8">
         <div class="well">

             <a href="profile.html">
                 <div class="col-sm-4">
                   <div class="text-center">
                       <img src="http://placehold.it/150x150.gif" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
                       <div class="m-t-xs font-bold">{{customer.customerName}}</div>
                   </div>
                 </div>
                 <div class="col-sm-8">              
                     <h4><strong>{{customer.CustomerNumber}}</strong></h4>
                     <address>                
                         {{customer.branch.address}}<br>
                         {{customer.branch.city}}<br>                
                     </address>
                 </div>
                 <div class="clearfix"></div>
               </a>           
         </div>
       </div>
    </slide>

  </carousel>

 

  angular.module('demoApp', ['ngAnimate', 'ui.bootstrap'])

 .filter('startFrom', function() {
   return function(input, start) {
          if(input) {
              start = +start; //parse to int
              return input.slice(start);
          }
          return [];
      }
  })

.controller('DemoApp', ['$scope', function ($scope) {

$scope.slideLength = Math.ceil($scope.customerData.length / 8); // place this after your model has been declared