Angularjs uiグリッドセルテンプレートは、テンプレートレンダリングでセルの値を使用する必要があります

Question

私はAngularjs UIグリッドを使用していますが、セルのテンプレートレンダリングで小さなヘルプが必要です。各行で、最初の列にはセルの値に基づいて進捗バーが表示されます。

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> 

私が使用しているUIブートストラッププログレスバーだから私は私のコントローラで次のように使用しています。しかし、私は値をハードコードしているので、それぞれの進捗バーは55%と表示されます。今度は "completeStatus"フィールドの値に基づいてプログレスバーの値を変更したいと思います。だから私はcellTempalateに変更しました

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

しかし、それは動作していません。進捗バーにセルの値を使用し、その値をスパンに表示したい。誰でもこれを修正するのに役立つことができますか？

Answer 1

これを試してみてください：

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

あなたがcompleteStatusプロパティを持つ行のオブジェクトを補間するUIグリッドを言っているこの方法です。