在ng-重复中自动调整字体大小

Question

我目前正在尝试调整字体大小，以适应一个固定大小的div。我发现这段有趣的javascript代码做得很好

      $('#defect-text div').css('font-size', '1em');

            while ($('#defect-text div').height() > $('#defect-text').height()) {
                $('#defect-text div').css('font-size', (parseInt($('#defect-text div').css('font-size')) - 1) + "px");
            }

有关以下HTML代码

<div ng-repeat="defect in surface.defects" class="new-page">
           <div id="defect-text">
                                    <div>
                                        <div id="defect-title">{{ 'TYPE' | translate }}:</div>
                                        {{ defect.type }}
                                        <div id="defect-title">Emplacement du défaut:</div>
                                        {{ defect.location }}
                                        <div id="defect-title">Dimension du défaut:</div>
                                        {{ defect.dimension }}
                                        <div id="defect-title">Actions suggérées:</div>
                                        {{ defect.future_operation }}
                                        <div id="defect-title">Détail technique du défaut:</div>
                                        {{ defect.description }}</div>
                                </div></div>

但是，由于不同的div位于ng-重复表达式中，所以我的javascript代码将调整每个容器的字体大小，使之具有第一个容器所需的大小。是否有一种方法可以更改为代码来选择ng重复的当前元素，并且只更改它自己的css以适应容器？

提前感谢

Answer 1

我认为你的问题其实是个大问题：

$('#defect-text div').css('font-size'...)

您正在选择id="defect-text"元素的所有id="defect-text"后代(不管有多深)，并在此时对它们进行修改。从技术上讲，ID必须是唯一的(如果您有多个具有相同ID的元素，则不能很好地定义行为)，而且我认为您的选择器在这个特定循环中获取了包含在任何<div>元素中的所有#defect-text元素，这可能比您想要的要宽得多。

我建议修改ng-重复块，并使用角表达式语言替换ID，如

<div id="{{ defect.id }}">

然后可以使用$("#"+defect.id + " div")获取唯一缺陷的所有<div>后代。

我还会考虑使用子选择器"> div"而不是所有的后代。