Question

假设我有大量具有不同id的html元素，我想反复更改控制器中的样式（用于频谱可视化）。什么是最简单的方法（角度方式），而不必像

那样编写重复的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

你可以做下一个：

<div id="spectrumWrapper">
    <div class="stapleWrapper" ng-repeat="item in items">
        <div id="sp_{{$id}}">{{item.name}}</div>
    </div>
</div>

在控制器中，您可以指定重复元素的数组：

.controller('someCtrl', ['$scope', function($scope) {
    $scope.items = [
        {name: 'Name1', value: '1'},
        {name: 'Name2', value: '2'},
        {name: 'Name3', value: '3'},
    ];
}]);

我们的想法是在{{$id}}属性中添加id。 ng-repeat为每个$id d元素执行唯一的ng-repeate。

演示：http://plnkr.co/edit/HBq5sqD20e0p8V5i5KW8?p=preview

Answer 2

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

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

这是fiddle。

我希望这是你正在尝试的。

感谢。

Answer 3

为什么不动态生成DIV？

您可以使用createElement函数在Javascript中执行此操作（然后将该节点附加到document.body），但我可能会在PHP / ASP或其他一些服务器端语言中执行此操作。

顺便说一句，您不应该多次使用ID - 而不是，您可能希望使用

使用Angular处理具有不同id的多个div

3 个答案:

演示：http://plnkr.co/edit/HBq5sqD20e0p8V5i5KW8?p=preview