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.

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