angularjs - ANGULAR JS UI-GRID:如何动态创建基于行的下拉菜单
问题描述
我正在做一个项目,我试图在 UI Grid 中添加一个下拉列表,这些下拉列表的值应该直接来自数据库。我怎样才能实现这个功能?并添加代码和 html
这是我实现的代码
控制器JS
function
fetchData ()
{
$http({
url: "api/GetAllpattern",
method: 'GET',
dataType: 'json',
headers: { "Content-Type": "application/json" }
}).then(function (result) {
if (result) {
$scope.gridOptions.data = result.data;
}});}
$scope.gridOptions = {
rowHeight: 38,
enableFullRowSelection: true,
multiSelect: true,
columnDefs: [
{ name: 'Slno' },
{ name: 'Name', type: 'number' },
{
name: 'Pattern',
// editableCellTemplate: 'uiSelect',
cellFilter: 'mapGender',
enableCellEdit: true,
editType: 'dropdown',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'displayName',
editDropdownValueLabel: 'Pattern', editDropdownOptionsArray: [
{ id: 1, gender: 'male' },
{ id: 2, gender: 'female' },
],
editDropdownValueLabel: 'type',
},
]};
}
HTML 标记
<div ui-grid="gridOptions"
ui-grid-selection
ui-grid-edit
class="grid">
解决方案
function loadcourseGrid() {
var params = { 'SchoolCollege': $scope.usersList.SchoolCollege };
$http({
url: "api/GetAllcourse",
method: 'GET',
dataType: 'json',
params: params,
headers: { "Content-Type": "application/json" }
}).then(function (result) {
if (result) {
var coursedata = result.data;
for (i = 0; i < coursedata.length; i++) {
if (coursedata[i].PatternSlno == 1) {
coursedata[i].PatternName = 'WEEKLY';
} else if (coursedata[i].PatternSlno == 2) {
coursedata[i].PatternName = 'FORTNIGHT';
}
else if (coursedata[i].PatternSlno == 3) {
coursedata[i].PatternName = 'MONTHLY'
}
else {
coursedata[i].PatternName = 'Choose Pattern .. '
coursedata[i].PatternSlno = 0;
}
}
$scope.gridOptionscourse.data = coursedata;
}
});
}