Sharing Top Content from the Angular-sphere.

How To Create A Grid Dynamically Using Angular

How To Create A Grid Dynamically Using #Angular by Sahil Saini cc @CsharpCorner

  • 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);  

How To Create A Grid Dynamically Using Angular

Comments are closed, but trackbacks and pingbacks are open.