Question

以下是展示问题的jsFiddle example。

我有一个容器div，它有一个固定的高度。在div中填充的数据来自json对象列表，文本内容的大小因每个项目而异。

因此，当内容大小大于div的高度时，div之外会有大量文本溢出。

我需要将溢出的内容放入另一个相同高度的div中，可以通过nav-tabs访问。导航标签的数量应取决于整体内容的大小。

目前，我正在根据列表的长度创建nav-tabs，但我仍然想办法将溢出的文本附加到新标签中。我怎样才能做到这一点？请随意编辑我的上述jsfiddle。

此外，我目前正在根据粗略计算创建导航标签，这取决于列表的长度，并且此方法效率非常低，因为应根据内容的大小创建导航标签的数量。例如，如果所有内容都适合第一个div，那么一个nav-tab就足够了。如果第一个div的溢出可以只容纳一个新的div，那么两个nav-tabs就足够了，其余的就足够了。

那么，有没有办法根据内容的大小创建导航标签？

下面是我的控制器，它创建一个包含虚拟数据的列表，然后创建navtabs。其余代码可在jsFiddle

上找到

app.controller('testCtrl', ['$scope', function ($scope) {

$scope.list = [];

$scope.generateList = function () {
    var tmpList = [{text:'first item',value:0,enabled:true}];

    var someText = ' - Contrary to popular belief, Lorem Ipsum is not simply random text.' + 
    'It has roots in a   piece of classical Latin literature from 45 BC,' +
     'making it over 2000 years old.';

    var count = $scope.input;
    for (var i = 1; i <= $scope.input; i++) {
        var appendText = tmpList[i-1].text;
        tmpList.push({
            text: 'item' + i + someText + appendText,
            value: i,
            enabled: true
        });
    }

    $scope.list = tmpList;

    $scope.navtabs = [];
    for (var i = 1; i <= Math.ceil(tmpList.length / 5); i++) {
        $scope.navtabs.push({
            id: i,
            name: 'tab' + i
        });
    }
};
}]);

非常感谢任何帮助。 - 谢谢

Answer 1

可能使用＆＃34; ui bootstrap分页＆＃34; ：

在ng-repeat上添加过滤器分页：

<div ng-repeat="item in list | filter:paginate:current:5">
    <div ng-switch on = "item.value % 2">
        <div ng-switch-when="0">
            <div>Some Title - (even)
                <p ng-bind-html-unsafe="item.text | breakFilter"></p>
            </div>
        </div>
        <div ng-switch-when="1">
            <div>Some Title - (odd)
                <p ng-bind-html-unsafe="item.text | breakFilter"></p>
            </div>
        </div>
    </div>
</div>

并添加分页指令：

<pagination class="pagination" ng:show="list.length>5" total-items="list.length" page="current" boundary-links="true" max-size="7" num-pages="numPages" rotate="false">

AngularJS - 如何根据特定条件将内容包含到动态生成的bootstrap nav-tabs中？

1 个答案: