How to create conditionally dynamic html in ui-grid (like row which having input box, select box and submit button)
Deepak Patidar
for(var i = 0; i < $scope.rows.length; i++) {
for(var j = 0; j < $scope.customColumns.length; j++) {
var customColumn = $scope.customColumns[j];
switch(customColumn.inputType) {
case 'string':
customColumn['cellTemplate'] = '<div class="ui-grid-cell-contents"><input type="text" ng-if="row.entity.status === \'readyForAssignment\'" class="sample-id form-control" ng-model="row.entity[customColumns.field]" ng-disabled="row.entity.disable"/></div>';
customColumn['width'] = 130;
break;
case 'dropdown':
customColumn['cellTemplate'] = '<div class="ui-grid-cell-contents"><select ng-if="row.entity.status === \'readyForAssignment\'"
data-ng-model="row.entity[customColumns.field]" class="form-control assigned-test"
data-ng-options="item as item for item in grid.appScope.[customColumns.field]+'List' track by item" ng-disabled="row.entity.disable">
<option value="" selected hidden /></select></div>';
customColumn['width'] = 120;
break;
case 'date':
customColumn['cellTemplate']= '<div class="ui-grid-cell-contents"><mdp-date-picker ng-if="row.entity.status === \'readyForAssignment\'"
mdp-placeholder="mm/dd/yyyy" mdp-open-on-click mdp-max-date="grid.appScope.currentDate" mdp-format="MM/DD/YYYY"
ng- model="row.entity[customColumns.field]"> </mdp-date-picker> </div>';
break;
case 'submit-button':
customColumn['cellTemplate'] = '<div class="ui-grid-cell-contents"><button ng-if="row.entity.status === \'readyForAssignment\'" class="btn btn-sm fs- button submitBtn" ng-disabled="row.entity.disable || !row.entity.testPanel || !row.entity.accessionId || !row.entity.sampleReceivedDate"
ng-click="grid.appScope.submitTestPanel(row.entity, grid.renderContainers.body.visibleRowCache.indexOf(row))"> {{row.entity.submitBtnLabel}} </button> </div>';
customColumn['width'] = 100;
break;
default:
customColumn['cellTemplate'] = '<div class="ui-grid-cell-contents">{{COL_FIELD}}</div>';
}
}
}
Here suppose we got input type as "string" then it will generate two input box with there ng-model name which is fetched from row.entity[customColumns.field] and same thing with drop down but the issue is how to generate the select box from dynamic array name so what I want if the customColumns.field equal "user" then it should be like
data-ng-options="item as item for item in grid.appScope.[customColumns.field]+'List' :====> after replace value of customColumns.field
data-ng-options="item as item for item in grid.appScope UserList" so it would be dynamic for every input type of dropdown.
So please suggest how can I achieve this.
