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 bootstrap 进度条，它对上述设置工作正常。但是每个进度条都显示 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 属性.

的行的对象

Angularjs ui 网格单元格模板应在其模板渲染中使用单元格值

Angularjs ui grid cell Template should use cell value in its template rendering

angularjs

angularjs-directive

angularjs-scope

angular-ui-grid