AngularJS needless span

Question

I have the following HTML/AngularJS code:

<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>

The result of this code is:

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

but I would absolutely need this one:

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

Is there any possibility to do it like this?

Thanks a lot!

cubbuk · Accepted Answer · 2015-08-27 07:15:33Z

4

Just put ng-repeat onto inner span. I removed the ng-show=true part, it is unnecessary.

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

answered Aug 27, 2015 at 7:15

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m.brand · Accepted Answer · 2015-08-27 07:16:35Z

0

The following should work for you:

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

You can wrap your ng-if expression around the repeated span if you need it.

answered Aug 27, 2015 at 7:16

m.brand

6585 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS needless span

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related