javascript - HTML5 and angularJS only conditional template solution possible (without ComponentOne pricetag)? -

i looking @ componentone wijmo angularjs conditional template example , dynamic columns templates example further down page here:

http://demos.componentone.com/wijmo/5/angular/celltemplateintro/celltemplateintro/

componentone asking quite bit of $$$ software , need built one-off.

i have database of consignment customers , inventory in ms access form ten years ago.
print out price labels, bar codes, product information, , several receipts each items on consignment using static html pages templates.

i have more control on able select print out moving html5 , angularjs.

not sound contemptuous, looking @ componentone example below, not clear on special or proprietary have designed. design own version scratch guidance brain trust.

html

<div class="col-md-6 conditional"> <wj-flex-grid      items-source="data3"      allow-sorting="false"      initialized="dynacolumnsflexinit(s)"     style="height:300px"      selection-mode="none"     allow-dragging="none"      defer-resizing="true">     <wj-flex-grid-column          header="country"          binding="country">         <wj-flex-grid-cell-template cell-type="groupheader">             <ng-include       src="'scripts/celltemplates/countrygroupheadertemplate.html'">             </ng-include>         </wj-flex-grid-cell-template>     </wj-flex-grid-column>      <!-- ng-init here creates colctx property subproperties          isolated on column level, not visible          columns share data cell templates         defined column. -->     <wj-flex-grid-column         ng-repeat="col in statisticscolumns"          ng-init="colctx = { reporttype: col.reporttype || 'chart' }"         ng-if="col.isavailable"         header="{​{col.header}}"          binding="{​{col.binding}}"          width="{​{col.width}}"          format="{​{col.format}}"         aggregate="sum"          align="{​{col.align}}">         <wj-flex-grid-cell-template              cell-type="columnheader"              ng-if="col.columnheadertemplateurl">             <ng-include src="col.columnheadertemplateurl">             </ng-include>         </wj-flex-grid-cell-template>         <wj-flex-grid-cell-template              cell-type="group"              ng-if="col.grouptemplateurl">             <ng-include src="col.grouptemplateurl">             </ng-include>         </wj-flex-grid-cell-template>     </wj-flex-grid-column>  </wj-flex-grid>  <div style="margin:5px 0 5px"><b>show statistics for:</b></div> <wj-list-box      class="checkable-listbox"     style="min-width:150px"     items-source="statisticscolumns"     display-member-path="header"     checked-member-path="isavailable">  </wj-list-box> </div> 

js file

var getcv = function (data) { var datacv = new wijmo.collections.collectionview(data); datacv.sortdescriptions.push(new       wijmo.collections.sortdescription('date', true)); datacv.groupdescriptions.push(new  wijmo.collections.propertygroupdescription('country')); return datacv; }  $scope.data3 = getcv(data);  $scope.statisticscolumns = [ {     binding: 'downloads',     header: 'downloads',     width: '230',     align: 'center',     format: 'n0',     columnheadertemplateurl:    'scripts/celltemplates/statheadertemplate.html',     grouptemplateurl: 'scripts/celltemplates/statgrouptemplate.html',     reporttype: 'chart',     isavailable: true }, {     binding: 'sales',     header: 'sales',     width: '230',     align: 'center',     format: 'n2',     columnheadertemplateurl:  'scripts/celltemplates/statheadertemplate.html',     grouptemplateurl: 'scripts/celltemplates/statgrouptemplate.html',     reporttype: 'chart',     isavailable: false }, {     binding: 'expenses',     header: 'expenses',     width: '230',     align: 'center',     format: 'n2',     columnheadertemplateurl:  'scripts/celltemplates/statheadertemplate.html',     grouptemplateurl: 'scripts/celltemplates/statgrouptemplate.html',     reporttype: 'table',     isavailable: true }, ];  $scope.dynacolumnsflexinit = function (flex) { flex.collapsegroupstolevel(0); flex.columnheaders.rows.defaultsize = 36; flex.cells.rows.defaultsize = 156; } 

am missing here behind scenes, or generic flex grid of kind accomplish same thing without hefty price $$$ ?

statheadertemplate file:

{​{$col.header}}: <wj-combo-box  items-source="['chart', 'table']"  selected-value="colctx.reporttype" style="width:100px;font-weight:400"  is-editable="false"> </wj-combo-box> 

statgrouptemplate file:

<div style="font-size:small;text-align:center"> <wj-flex-grid ng-if="colctx.reporttype == 'table'"     items-source="$item.items"     is-read-only="false"     headers-visibility="none"     selection-mode="cell"     format="{​{$col.format}}"     style="height:140px;width:200px"> <wj-flex-grid-column  binding="date"  width="*"> </wj-flex-grid-column> <wj-flex-grid-column  binding="{​{$col.binding}}"  width="*"> </wj-flex-grid-column> </wj-flex-grid> <wj-flex-pie  ng-if="colctx.reporttype == 'chart'" items-source="$item.items"  binding="{​{$col.binding}}" tooltip-content="<b>{value:{​{$col.format}}}</b><br/>{date:mmm yyyy}"                       style="height:140px;width:140px;display:inline-block"> <wj-flex-chart-legend position="none"></wj-flex-chart-legend> <wj-flex-pie-data-label  content="'{date:mmm}'"  position="inside"> </wj-flex-pie-data-label> </wj-flex-pie>     </div> 

countrygroupheadertemplate

<img ng-src="resources/{​{$item.name}}.png" /> {​{$item.name}} 

if notice statheadertemplate, statgrouptemplate, , countrygroupheadertemplate have angular ng references, see wijmo references interspersed (wj-whatever) , wijmo collection (see js tab).

i open suggestions - - whatever works can make conditional selections want display within each column (and in form choose) corresponding row.

my goal keep static html files printing borders , logos, , use cell data flex chart inputs templates can print out selected items in 1 pass.

i want realistic whether can dissected , redone using html5 , angularjs before start project. want away ms access / vba.

i point if have give static html files templates keep angularjs happy, willing it, static html files have graphics, etc. prefer keep.

is there way modify templates generate static html files work directly angularjs somehow instead? in advance...