Angularjs ui grid dynamic cell template value

Question

In angularjs ui grid, I have the cell template as shown below :

cellTemplate: " <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div>"

Now I need to dynamically set width percentage( style="width: 20%") based on cell value, it could be 30% or 40% or 53%, etc. How can we make it dynamic using row.entity.status? status is my column.

Rishabh · Accepted Answer · 2016-10-20 12:54:18Z

1

Angular provide very useful directive called ng-style

ng-style="{width:'{{dynamicValue}}%'}"

In this case

cellTemplate: ' <div class="progress"> <div class="progress-bar progress-bar-info" ng-style="{width:'{{dynamicValue}}%'}"></div> </div>'

edited Oct 20, 2016 at 12:54

answered Oct 20, 2016 at 12:48

Rishabh

1,2131 gold badge11 silver badges20 bronze badges

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

1 Comment

smart987 Over a year ago

Rishabh, do you have any answer for a similar question with ng-class. Please find my post at stackoverflow.com/questions/40170055/…

Collectives™ on Stack Overflow

Angularjs ui grid dynamic cell template value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related