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>

这样你告诉 ui-grid 插入具有completeStatus 属性的行对象。