javascript - angularjs想要的打印布局不正确

Question

我目前正在使用这个:

<li ng-repeat="items in ferdigheter">{{ items.title}}
<div class="circles">
    <div class="circle" ng-repeat="a in thisnumber(items.stars)"></div>
    <div class="empty_circle" ng-repeat="a in thisnumber(items.maxstars - items.stars)"></div>

</div>
</li>

当我查看正在打印的内容时(ctrl+p)，标题在那里，但圆圈/空圆圈不在打印中。知道为什么吗？

我如何确保圆圈也会被打印出来？

当前页面:

当前打印:

想要打印:

更新:

范围:

  $scope.ferdigheter = [
        {tittel: 'Adobe Photoshop', stars: 2, maxstars: 5},
        {tittel: 'CSS/html', stars: 5, maxstars: 5},
        {tittel: 'PHP', stars: 4, maxstars: 5},
        {tittel: 'Angular', stars: 3, maxstars: 5},
        {tittel: 'Javascript', stars: 4, maxstars:5},
        {tittel: 'MS Word', stars: 4, maxstars: 5},
        {tittel: 'Dreamviewer', stars: 2, maxstars: 5},
        {tittel: 'Phpstorm', stars: 4, maxstars: 5},
        {tittel: 'Codeigniter', stars: 5, maxstars: 5},
        {tittel: 'XXX', stars: 3, maxstars: 5},
        {tittel: 'XXX', stars: 5, maxstars: 5},

    ];

作用域thisnumber创建一个数组

Answer 1

用于打印的 CSS 样式可能很棘手。例如，在 Chrome 中，您可能需要使用 -webkit-print-color-调整:exact; 才能正常工作。

在这里查看更完整的答案: https://stackoverflow.com/a/15253634/55154