AngularJS - 如何根据特定条件将内容包含到动态生成的bootstrap nav-tabs中？ [英] AngularJS - How to include content to dynamically generated bootstrap nav-tabs based on certain conditions?

问题描述

这是我的 jsFiddle示例，用于演示此问题。



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



因此，当内容大小时大于div的高度，div外面有一个巨大的文本溢出。



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



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



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



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



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

Here is my jsFiddle example that demonstrates the problem.

I have a container div, that has a fixed height. The data that gets populated within the div comes from a list of json objects, and the size of the text content varies for each item.

So, when the content size is bigger than the height of the div, there is a huge overflow of text outside the div.

I need to place the overflown contents into a another div of same height which can be accessed through nav-tabs. The number of nav-tabs should depend of the size of the overall content.

At the moment, I'm creating nav-tabs based on the length of the list, but still I can't figure out a way to append the overflowing text into the new tab(s). How can I achieve this ? Please feel free to edit my above jsfiddle.

Also, I'm currently creating nav-tabs based on a crude calculation that depends on the length of the list, and this method is very inefficient as the number of nav-tabs should be created based on the size of the content. For example, if all the contents can fit in the first div, then one nav-tab is sufficient. If the overflow from first div can be accommodated in just one more new div, then two nav-tabs will be enough, and similarly the rest.

So, is there a way to create nav-tabs based on size of the content ?

Below is my controller that creates a list with dummy data, and then creates navtabs. The rest of my code is available on 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
        });
    }
};
}]);

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

Any help would be much appreciated. - Thanks

推荐答案

scope'，function（

scope', function (

scope）{

范围.list = [];

scope.list = [];

这篇关于AngularJS - 如何根据特定条件将内容包含到动态生成的bootstrap nav-tabs中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！