javascript - 使用 Angular 操作具有不同 id 的多个 div

Question

假设我有大量具有不同 id 的 html 元素，我想在我的 Controller 中重复更改它们的样式(用于频谱可视化)。什么是最简单的方法( Angular 方式)而无需编写重复的 HTML 代码

<div id="spectrumWrapper">
    <div class="stapleWrapper">
        <div id="sp_1"></div>
    </div>
    <div class="stapleWrapper">
        <div id="sp_2"></div>
    </div>
    <div class="stapleWrapper">
        <div id="sp_3"></div>
    </div>
    <div class="stapleWrapper">
        <div id="sp_4"></div>
    </div>
    <div class="stapleWrapper">
        <div id="sp_5"></div>
    </div>
    //.. And so on
</div>

在我的 .js 文件中有

var sp = []
for(var i = 1; i < 41; i++)
   sp[i] = document.getElementById('sp_' + i);
//Some Calculations
for(var i = 1; i < 41; i++)
 sp[i].style.height = '' + 50*vecAverageAmp[i-1] +'px';

这工作正常，但我的 .html 文件很长。也许我可以通过某种方式使用 ng-repeat？

Answer 1

您可以按以下方式使用 ng-repeat 并根据索引动态添加唯一 ID。

<div id="spectrumWrapper">
            <div name="stapleWrapper" ng-repeat="data in dataList">
                <p id="sp_{{$index}}">{{data}}</p>
            </div>
</div>

这是 fiddle .

我希望这就是您正在尝试的。

谢谢。