引导轮播显示不同数量根据屏幕大小项目(Bootstrap Carousel that shows d

我使用的是引导的旋转木马创建的仪表板，显示了一堆Highcharts部件。我已经成功地实现了它，以便1个图表显示了与所使用的比特“分块”的逻辑，以显示在一个时间2个部件。这一切的伟大工程，但我想，以增强事情：

如果用户有一个屏幕尺寸足够大，以适应两个图表，显示两个图表，并通过2分页。
如果用户具有仅适合1个图的小屏幕尺寸，显示1和由1分页。
如果用户具有一个屏幕大小<2，但> 1时，表现出1.5的图表和通过1分页。

我用AngularJS来构建HTML。这是很容易做到的＃1和＃2分开模板块再展根据屏幕大小/隐藏。然而，我在＃3有点难倒。我无法弄清楚如何显示两个图表，但只有1分页。

最后我写了下面的JavaScript来做到这一点。基本上，我呈现两个不同的部分（带班.oneup和.twoup），然后添加一个“预览”如果.oneup显示。

<script type="text/javascript">
var chartBar = $('#chart-bar');

function chartPreview(firstChart) {
    var chartBarWidth = chartBar.width();
    if (chartBarWidth > 600) {
        var currentChart = $('.carousel-inner:visible .active');
        // append the next widget to the current item
        var chartToCheck = (firstChart) ? currentChart : currentChart.next();

        if (chartToCheck.next()) {
            chartToCheck.next().find('.widget').clone().appendTo(chartToCheck);
            $('.carousel-inner').css({'margin-left': '10px', 'width': '98.8%'})
        }
    } else if (chartBarWidth > 1040) {
        $('.carousel-inner').css({'margin-left': '0', 'width': '100%'})
    }
}
$(document).ready(function() {
    $('.widgets').sortable({
        cursor: "move",
        handle: ".heading"
    }).disableSelection();
    $('.boxes,.tasks').sortable();

    var carousel = $('.carousel');
    $(carousel).carousel({
        interval: 0
    });

    if (chartBar.width() < 1040) {
        chartBar.find('.oneup').show();
        chartPreview(true);

        carousel.bind('slide', function() {
            chartPreview(false);
        });
    } else {
        chartBar.find('.twoup').show();
    }
});

这会是很好，如果我没有呈现既oneup和twoup，但我不知道怎么做，与AngularJS。这是我的oneup NG-重复：

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget}}" type="{{widget.chartType}}"></chart>
    </div>
</div>

对重复的twoup：

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | chunk: 2 | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget[0]}}" type="{{widget[0].chartType}}"></chart>
        <chart class="widget" value="{{widget[1]}}" type="{{widget[1].chartType}}"></chart>
    </div>
</div>