Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Point variable use index
-
when I have maybe 10 datapoint's xid like "DP_c01_temperature" "DP_c02_temperature" ... "DP_c10_temperature"
I want use ng-repeat to get 1 to 10 index code like this
<div ng-repeat="x in [].constructor(10) track by index"> <ma-get-point-value point-xid="DP_c{{index}}_temperature" point="c{{index}}_temperature"></ma-get-point-value> <div class="value">C{{index}} Temperature: <span ng-bind="c{{index}}_temperature.value"></span></div> </div>but point in console Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 4 of the expression [c{{index}}_temperature] starting at [{{index}}_temperature].
How can I fix it ?
-
@sean said in Point variable use index:
<div ng-repeat="x in [].constructor(10) track by index">
<ma-get-point-value point-xid="DP_c{{index}}_temperature" point="c{{index}}_temperature"></ma-get-point-value>
<div class="value">C{{index}} Temperature: <span ng-bind="c{{index}}_temperature.value"></span></div>
</div>Right idea, wrong execution:
You cannot make a point variable from a text string.
Use an object on init. Assuming your constructor generates a list of integers...<div ng-init="pts={}"><!-- create storage object for point items --> <div ng-repeat="idx in [0,1,2,3,4,5,6,7,8,9,10] track by $index"> <ma-get-point-value point-xid="DP_c{{idx}}_temperature" point="pts['c'+idx+'_temperature']"></ma-get-point-value><!-- Initialist object index--> <div class="value">C{{idx}} Temperature: <span ng-bind="pts['c{{idx}}_temperature'].value"></span><!-- Bind from established index --></div> </div> </div>Fox
-
Thank you ! for It working
-
Anytime!
-
I got new idea
use component
app.component("pointCom", { bindings: { point: "<", qty: "@", min: "@", max: "@" }, controller: dataController, controllerAs: "dc", template:` <span>Render</span> <div ng-bind-html="dc.sour"> </div> ` }); dataController.$inject = ["$scope"] function dataController($scope){ let dc = this let P = dc.point let Q = dc.qty let min = dc.min let max = dc.max let num = 0 this.$onChanges = function() { let p = dc.point dc.sour = '' max = dc.max num = dc.min console.log(school) if (max !== undefined){ Q = max } else { Q = dc.qty } if (p !== undefined){ for (let i=0; i < Q; i++){ num = Number(num) num = num.pad(3) dc.sour += ` <ma-get-point-value point-xid="DP_${num}_Meter_kWh" point="c${num}_Meter_kWh"></ma-get-point-value> <ma-get-point-value point-xid="DP_${num}_Meter_V" point="c${num}_Meter_V"></ma-get-point-value> <ma-get-point-value point-xid="DP_${num}_Meter_A" point="c${num}_Meter_A"></ma-get-point-value> ` num++ } console.log(dc.sour) angular.element(dc.sour) } } Number.prototype.pad = function(size) { let s = String(this) while (s.length < (size || 2)) {s = "0" + s;} return s } }but in the html dom
<ma-get-point-value>just dispear like this pic
how do I fix it?in console.log can see dc.sour
<ma-get-point-value point-xid="DP_001_Meter_kWh" point="c001_Meter_kWh"></ma-get-point-value> <ma-get-point-value point-xid="DP_001_Meter_V" point="c001_Meter_V"></ma-get-point-value> <ma-get-point-value point-xid="DP_001_Meter_A" point="c001_Meter_A"></ma-get-point-value> -
Angularjs doesnt let you output html through a variable. That is what templates are for. You need to tell the controller that the html string is valid and needs to be outputted as part of the template.
Use $sce.trustAsHtml with your html inside the brackets.
Be sure to inject $sce into your controller.
Fox
-
thank you
use $sce can show inside component<ma-get-point-value point-xid="DP_001_Meter_kWh" point="c001_Meter_kWh"></ma-get-point-value>but can't use bind
{{c001_Meter_kWh.value}}in other side to see value
how to fix it? -
You are over complicating it.
Use what I wrote originally as your template and rather than adding html and trying to make angular js evaluate it. $sce is for outputting html, not another directive. I should have looked more closely at what you are doing....
increment a counter then make it ng-repeat n times depending on how big your number value is.app.component("pointCom", { bindings: { point: "<", qty: "@", min: "@", max: "@" }, controller: dataController, controllerAs: "dc", template:` <span>Render</span> <div ng-repeat="idx in dc.sour track by $index"> <ma-get-point-value point-xid="DP_{{idx}}_Meter_kWh" point="dc.pts['c'+idx+'_Meter_kWh']"></ma-get-point-value> <ma-get-point-value point-xid="DP_{{idx}}_Meter_V" point="dc.pts['c'+idx+'_Meter_V']"></ma-get-point-value> <ma-get-point-value point-xid="DP_{{idx}}_Meter_A" point="dc.pts['c'+idx+'_Meter_A']"></ma-get-point-value> </div> ` }); dataController.$inject = ["$scope"] function dataController($scope){ let dc = this let P = dc.point let Q = dc.qty let min = dc.min let max = dc.max let num = 0 this.$onChanges = function() { let p = dc.point dc.sour = [] max = dc.max num = dc.min console.log(school) if (max !== undefined){ Q = max } else { Q = dc.qty } if (p !== undefined){ for (let i=0; i < Q; i++){ num = Number(num) num = num.pad(3) dc.sour.push(num) } console.log(dc.sour) } } Number.prototype.pad = function(size) { let s = String(this) while (s.length < (size || 2)) {s = "0" + s;} return s } }Try that and see how you go. Haven't tested this
Fox
