how-to Render bar-display class chart inside ng-repeat
-
I am trying to render a repeated horizontal barchart inside an ng-repeat. I tried this inside a <tr ng-repeat with limited success. The barchart will render and correctly display the text point.names in each chart but the convertedValue and renderedValue as well as the point's value return nothing when inside the ng-repeat. Outside the ng-repeat its a different story the charts render perfectly. My problem is there are hundreds of points I want to render so ng-repeat="point in mypoints" ... is the eloquent solution.
If someone could explain why I can only see the point's name inside an ng-repeat but not the point's value?
I also use <ma-get-point-value point="mypoint"> successfully outside the ng-repeat but putting it inside the ng-repeat breaks the rendering and not even the point.names render, -
progress update.. I've figured enough out to get values rendering now however on update interval the ng-repeat portion gets wiped clean.. Anyone have an ideas on what's happening ? code below:
<ma-point-query query="{$and: true, deviceName:dvName, name: 'W-LITERS-PER-MIN'}" limit="144" points="wpoints"></ma-point-query> <ma-point-values points="wpoints" values="combined" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes"> </ma-point-values> <center><b><h3>Active Units Using Cold & Hot Potable Water</h3></b></center> <md-table-container ng-init="page.tableOrder='deviceName'"> <table md-table=""> <thead md-head="" md-order="page.tableOrder"> <tr> <th md-column=""></th> <!--<th md-column="" md-order-by="deviceName">Hot Water by Unit</th>--> </tr> </thead> <tbody md-body="" ng-init="test = true"> <tr ng-repeat="wpoint in wpoints | orderBy: tableOrder"> <td ng-repeat="value in combined"> <span ng-if= "value['value_' + wpoint.xid] !== 0"> <div class="bar-display" ng-class="{'point-disabled': !wpoint.enabled}"> <div class="bar-display-fill" ng-style="{width: value['value_' + wpoint.xid] / max * 100 + '%'}" style=""></div> <div class="bar-display-text">{{wpoint.name}} : {{value['value_' + wpoint.xid]}}</div> </div> </span> </td> </tr> </tbody> </table> </md-table-container>