AngularJS不必要跨度

Question

我有以下HTML/AngularJS代码：

<span ng-show="true" ng-repeat="timeRangeObject in timeRangeObjects" ng-if="ifExpression">
    <span class="progress-bar progress-bar-{{timeRangeObject.type}}" style="width: {{timeRangeObject.percentage}}%" />
</span>

该代码的结果是：

<span>
    <span class="progress-bar ...
</span>
<span>
    <span class="progress-bar ...
</span>
<span>
    <span class="progress-bar ...
</span>
<span>
    <span class="progress-bar ...
</span>

但我绝对需要这个：

<span>
    <span class="progr ...
    <span class="progr ...
    <span class="progr ...
    <span class="progr ...
</span>

有可能这样做吗？

非常感谢!

Answer 1

下列各点应适用于你：

<span 
    ng-repeat="timeRangeObject in timeRangeObjects" class="progress-bar progress-bar-{{timeRangeObject.type}}" style="width: {{timeRangeObject.percentage}}%" >
</span>

如果需要，可以围绕重复的span包装ng-if表达式。

Answer 2

只需将ng-repeat放在内部跨度上即可。我删除了ng-show=true部分，这是不必要的。

<span ng-if="ifExpression">
    <span ng-repeat="timeRangeObject in timeRangeObjects" class="progress-bar progress-bar-{{timeRangeObject.type}}" style="width: {{timeRangeObject.percentage}}%" />
</span>