angular js ui grid template error

[Mn Kishore]

In angularjs ui grid I need to have dynamic cell template based on cell value. 

 "<div class="progress"> <div class="progress-bar progress-bar-info" ></div> </div>"

or 

 "<div class="progress"> <div class="progress-bar progress-bar-warning" ></div> </div>"

So I have given cell template as




cellTemplate: " <div class=\"progress margin-top-10\"> <div class=\"progress-bar\"   ng-class=\"{progress-bar-success:{{row.entity.status}}==='complete', progress-bar-warning:{{row.entity.status}}==='incomplete', progress-bar-danger:{{row.entity.status}}==='fail'}\"  ng-style=\"{width:'{{row.entity.val}}%'}\"></div> </div>"

But I am getting the following error:

angular.js:13920 Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [}] at column 10 of the expression [{progress-bar-success:complete==='complete', progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}] starting at [-bar-success:complete==='complete', progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}].

[Sander Elias]

Hi Mn,

That error is absolutely correct. Also, it gives you exact the problem you need to take care off.

If you put '-' inside a property name, you need to use quotes.

So, not this:

{progress-bar-success:complete==='complete'}

but:

{'progress-bar-success': complete ==='complete' }

Regards

Sander