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

时间:2016-06-01 10:06:17

标签: angularjs angularjs-directive angularjs-scope angular-ui-grid

我正在使用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>'

但它不起作用。我希望我的进度条使用单元格的值,我也希望在跨度中显示该值。任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

试试这个:

int array[] = { 10, 15, 18 }; //Input number X to find the largest number samller than or equal to X //X = 16 15 //Correct! //X = 200 Sorry, no such number exists //Wrong! Should be 18 //X = 1 10 //Wrong! There is no such number //Input number X to find the smallest number greater than or equal to X //X = 16 18 //Correct! //X = 200 Sorry, no such number exists //Correct! //X = 1 10 //Correct!

这样你就可以告诉ui-grid插入具有iter == ar属性的行对象。