CODEWITHSUNDEEP
javascriptcssangularjs
StrugglingCoder
StrugglingCoder

Reputation: 5021

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

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?

Upvotes: 1

Views: 3588

Answers (2)

gauravmuk
gauravmuk

Reputation: 1616

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

Upvotes: 4

Kaciano Ghelere
Kaciano Ghelere

Reputation: 393

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.

Upvotes: 0

Related Questions