Question

我尝试为每组时间条目创建一个唯一的堆叠进度条。

 scope.customDuration = function () {
                        for (var i = 0; i < scope.blocks.length; i++) {
                            var block = scope.blocks[i];
                            if (block.time !== "" && block.time !== null) {
                                blockTimes.push(block.time);
                            }
                        }
                        var duration = blockTimes.join();
                        return duration;
                    }

然后，我希望每次都有一个堆叠的进度条，因为它自己的分离。但是，我只能想出设定总数。

<div class="progress" style="width: 100%; background-color: #{{type.Color}};">
                            <div class="progress-bar progress-bar-danger" style="width: {{calculateTotal(type)}}%; background-Color: #{{type.Color}}; color: {{getContrastYIQ(type)}}"> {{type.totalTime}}</div>
                        </div>

有没有办法在进度条上实现customDuration？

Answer 1

UI-Bootstrap附带了bootstrap指令，还包括（堆叠）进度条： https://angular-ui.github.io/bootstrap/#/progressbar

查看此Plunker以获得一个易于理解的示例： http://embed.plnkr.co/PHvMVJd9qdLvTaVnYweg/preview

Bootsrap：使用数组堆叠进度条

1 个答案: