Angularjs ui Gitterzelle Vorlage sollte Zelle Wert in seiner Vorlage Rendering

Question

Ich benutze Angularjs Ui Grid, brauche ich kleine Hilfe in der Zelle Vorlage Rendering. In jeder Zeile sollte die erste Spalte den Fortschrittsbalken basierend auf dem Wert der Zelle anzeigen. So habe ich die folgenden in meinem Controller verwendet:

var ctrl = this; 

    ctrl.gridOptions = {}; 

ctrl.gridOptions.columnDefs = [{ 
     field: 'completeStatus', 
     cellTemplate: ' <uib-progressbar value="55"> </uib-progressbar>', 
     width: 100 
    }, 

    { 
     field: 'invoiceNum' 
    } 
]; 

ctrl.gridOptions.data = [{ 
    "completeStatus": "70", 

    "invoiceNum": "2332324" 
}, { 
    "completeStatus": "50", 

    "invoiceNum": "1221123" 
}, { 
    "completeStatus": "20", 

    "invoiceNum": "-" 
}]; 

html:

<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div> 

Ich habe ui Bootstrap-Fortschrittsbalken verwendet, die für die oben genannten Einstellungen funktioniert gut. Aber jeder Fortschrittsbalken zeigt 55%, weil ich den Wert fest codiert habe. Jetzt möchte ich den Fortschrittsbalkenwert basierend auf dem Wert im Feld "completeStatus" ändern. So habe ich geändert, um die cellTempalate zu

cellTemplate: '<span> '+ completeStatus +' </span> <uib-progressbar value='+ completeStatus + '> </uib-progressbar>' 

Aber es funktioniert nicht. Ich möchte, dass mein Fortschrittsbalken den Wert der Zelle verwendet, und auch ich möchte diesen Wert in der Spanne anzeigen. Kann mir irgendjemand dabei helfen, das zu beheben?

Answer 1

Versuchen Sie folgendes:

<span>{{row.entity.completeStatus}}</span> <uib-progressbar value='row.entity.completeStatus'></uib-progressbar>

Auf diese Weise können ui-Raster doch sagen, die Zeile des Objekt zu interpolieren, die die completeStatus Eigenschaft hat.