2

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.

smart987
  • 834
  • 2
  • 14
  • 34

1 Answers1

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>'
Rishabh
  • 1,205
  • 1
  • 11
  • 20
  • Rishabh, do you have any answer for a similar question with ng-class. Please find my post at http://stackoverflow.com/questions/40170055/ui-cell-template-needs-dynamic-ng-style/40170178#40170178 – smart987 Oct 21 '16 at 07:05