- In every column object, we have multiple key value pairs.
- In the object showTags, the key is used to merge multiple boolean columns into one column as tags.
- we store the array of columns in $scope.columns and array of data in $rootScope.gridData.
- Show and hide the columns by putting column.showColumns key on tags.
- Similarly row data are created by iterating $scope.gridData with column key.Example :
val[column.key] .
Create a grid dynamically with angularjs without hardcoding column names. AngularJS provides various features. One of them is 2 way data binding. In this article I will explain how you can create a grid dynamically from Angular.
@CsharpCorner: How To Create A Grid Dynamically Using #Angular by Sahil Saini cc @CsharpCorner
“key” : “Status” ,
“width” : “5%” ,
“key” : “ID” ,
“width” : “1%” ,
“key” : “Critical” ,
“width” : “1%” ,
“key” : “CSM” ,
“width” : “1%” ,
“key” : “E0/EC0” ,
“width” : “1%” ,
“key” : “MT2” ,
“width” : “5%” ,
“key” : “MT3” ,
“width” : “5%” ,
“key” : “Component” ,
“width” : “9%” ,
“key” : “Class Code” ,
“key” : “Caption” ,
“key” : “Dept” ,
“key” : “Rank” ,
“key” : “Interval” ,
“key” : “Start Date” ,
“key” : “End Date” ,
“key” : “Date/ Hours” ,
“key” : “Action” ,
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-11” ,
“End Date” : “2017-05-11” ,
“Critical” : “true” ,
“CSM” : “true” ,
“E0/EC0” : “false” ,
“MT2” : “CRI” ,
“Component” : “Me Cyl. Head [6]” ,
“Class Code” : “MDECYA” ,
“Caption” : “OVH, TST, CLN OF Me Cyl. Head [6]” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00006” ,
“Interval” : “6000 R/Hs” ,
“Date/ Hours” : “6129 R/Hs” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“val” : “P” ,
“color” : “label label-info” ,
“title” : “Planned”
“Start Date” : “2017-05-09” ,
“End Date” : “2017-05-11” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “false” ,
“Component” : “Me Injector Valves W/Pipes [3]” ,
“Class Code” : “MDECYA” ,
“Caption” : “TST, INSP OF Me Injector Valves W/Pipes [3]” ,
“Dept” : “ENG” ,
“Rank” : “CE” ,
“ID” : “00011” ,
“Interval” : “500 R/Hs” ,
“Date/ Hours” : “2812 R/Hs” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Due” ,
“color” : “label label-success”
“Start Date” : “2017-05-01” ,
“End Date” : “2017-05-01” ,
“Critical” : “true” ,
“CSM” : “true” ,
“E0/EC0” : “true” ,
“Component” : “Me Fo Pre-Heater” ,
“Class Code” : “” ,
“Caption” : “TST, CLN, INSP OF Me Fo Pre-Heater” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00150” ,
“Interval” : “30 M” ,
“Date/ Hours” : “5/20/2017” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-04” ,
“End Date” : “2017-05-04” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Me Flowmeter” ,
“Class Code” : “” ,
“Caption” : “INSP, CLN OF Me Flowmeter” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00151” ,
“Interval” : “30 M” ,
“Date/ Hours” : “5/19/2017” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Due” ,
“color” : “label label-success”
“Start Date” : “2017-05-04” ,
“End Date” : “2017-05-04” ,
“Critical” : “true” ,
“CSM” : “true” ,
“E0/EC0” : “true” ,
“Component” : “Ae Cyl. Head [1] [3]” ,
“Class Code” : “MDECYA” ,
“Caption” : “OVH, INSP OF Ae Cyl. Head [1] [3]” ,
“Dept” : “ENG” ,
“Rank” : “3E” ,
“ID” : “00164” ,
“Interval” : “1500 R/Hs” ,
“Date/ Hours” : “3845 R/Hs” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Due” ,
“color” : “label label-success”
“Start Date” : “2017-05-01” ,
“End Date” : “2017-05-02” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “D/E Frequency Low [1]” ,
“Class Code” : “” ,
“Caption” : “TST, INSP OF D/E Frequency Low [1]” ,
“Dept” : “ENG” ,
“Rank” : “ETO” ,
“ID” : “00922” ,
“Interval” : “6 M” ,
“Date/ Hours” : “11/14/2016” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-24” ,
“End Date” : “2017-05-26” ,
“Critical” : “true” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Boiler Fo Booster Pump Stbd” ,
“Class Code” : “” ,
“Caption” : “OVH, INSP OF Boiler Fo Booster Pump Stbd” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00470” ,
“Interval” : “30 M” ,
“Date/ Hours” : “5/6/2017” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-14” ,
“End Date” : “2017-05-26” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Boiler Safety Valve” ,
“Class Code” : “” ,
“Caption” : “OVH, INSP OF Boiler Safety Valve” ,
“Dept” : “ENG” ,
“Rank” : “3E” ,
“ID” : “00473” ,
“Interval” : “12 M” ,
“Date/ Hours” : “9/23/2016” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Due” ,
“color” : “label label-success”
“Start Date” : “2017-05-29” ,
“End Date” : “2017-05-14” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Air Condition Condenser” ,
“Class Code” : “” ,
“Caption” : “TST, INSP OF Air Condition Condenser” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00554” ,
“Interval” : “30 M” ,
“Date/ Hours” : “6/1/2017” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-11” ,
“End Date” : “2017-05-29” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Sludge Pump” ,
“Class Code” : “” ,
“Caption” : “OVH, INSP OF Sludge Pump” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00588” ,
“Interval” : “30 M” ,
“Date/ Hours” : “5/22/2017” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-13” ,
“End Date” : “2017-05-11” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Bilge Filters” ,
“Class Code” : “” ,
“Caption” : “CLN, INSP OF Bilge Filters” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00589” ,
“Interval” : “1 M” ,
“Date/ Hours” : “9/5/2016” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-11” ,
“End Date” : “2017-05-14” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Emergency Bilge Suction – Er” ,
“Class Code” : “” ,
“Caption” : “TST, INSP OF Emergency Bilge Suction – Er” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00591” ,
“Interval” : “1 M” ,
“Date/ Hours” : “9/5/2016” ,
“Action” : “”
data.push({
“Status” : [{
“val” : “Overdue” ,
“color” : “label label-danger”
“Start Date” : “2017-05-14” ,
“End Date” : “2017-05-13” ,
“Critical” : “false” ,
“CSM” : “false” ,
“E0/EC0” : “true” ,
“Component” : “Hydraulic For Operating Valve System” ,
“Class Code” : “” ,
“Caption” : “ANL, INSP OF Hydraulic For Operating Valve System” ,
“Dept” : “ENG” ,
“Rank” : “2E” ,
“ID” : “00594” ,
“Interval” : “6 M” ,
“Date/ Hours” : “12/2/2016” ,
“Action” : “”
$rootScope.gridData = eval(data);
