How to concat a string value in CSS property in Angular template

Question

I have a CSS property value pair something like this:

style="width:60%"

This works fine. But when I try to concat something like this inside of ng-repeat:

               <tbody ng-show="!vm.loading">
                    <tr ng-repeat="item in vm.currentBatches.items | orderBy: vm.sortBy.current_batch">


                        <td class="table-text" ng-show="!item.showRefreshForApiLoading">


                                <div class="progress progress-medium" ng-show="item.batch_status==='in progress'">
                                    <div class="progress-inner">
                                        <div class="segment" style="'width: "+item.succeeded_time_pct+"%">
                                        <div class="bar status-ok bar-striped"></div>
                                        </div>
                                    </div>
                                </div>
                                <span class="progress-label status-ok" ng-show="item.batch_status==='in progress' && item.progressFlag !== 'NA'">In Progress</span>

Why does this not work ?

style="width: "+item.succeeded_time_pct+"%">

This says CSS property value expected,

What am I doing wrong?

I think you should look at ng-class (docs.angularjs.org/api/ng/directive/ngClass) directive. — CrazyGeek
– CrazyGeek, Commented Jun 21, 2017 at 11:33

gauravmuk · Accepted Answer · 2017-06-21 11:52:31Z

4

You can fix it using:

<div class="segment" ng-style="{'width': item.succeeded_time_pct + '%' }">

ng-style is a directive which angular offers to apply style properties dynamically

Ref: https://docs.angularjs.org/api/ng/directive/ngClass

edited Jun 21, 2017 at 11:52

answered Jun 21, 2017 at 11:33

gauravmuk

1,62614 silver badges20 bronze badges

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

3 Comments

StrugglingCoder Over a year ago

It fails. Unexpected end of expression: {'width': item.succeeded_time_pct+

gauravmuk Over a year ago

ng-style="{'width': item.succeeded_time_pct+'%'}" can you check the quotes if they match the answer?

gauravmuk Over a year ago

update the answer @StrugglingCoder, plz check "%" should have been '%'

Kaciano Ghelere · Accepted Answer · 2017-06-21 11:41:07Z

0

You can try also:

<div class="segment" style="width: {{item.succeeded_time_pct}}%">

But I recommend the usage of ng-class or ng-style, like the other fellows sayed.

answered Jun 21, 2017 at 11:41

Kaciano Ghelere

3931 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to concat a string value in CSS property in Angular template

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related