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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

<ma-point-values> & <ma-point-statistics> inside ng-if

Dashboard Designer & Custom AngularJS Pages
Log in to reply
  • ThomasEinasto

    Dear staff,

    I have a question for creating my page. So I have created a page where I have a local variable inside the page which can be switched by a click of a button.

    So i would like to put <ma-point-values> and <ma-point-statistics> inside a div which is created using ng-if. i.e something like this.

    <div ng-if="cableid == 1">
    
<ma-point-values point="S1_S1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="S1_S1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>
</div>

<div ng-if="cableid == 2">
    
<ma-point-values point="S1_S1_2" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2_2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3_2" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4_2" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5_2" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>  


</div>

    This is required because on some pages we might have too many datapoints and then I assume that the UI would get sluggish and slow if all points are queried.

    So do I have to create a custom module which uses these directives? Because currently this is not working as I would like to.

    Thanks,
    Thomas

    Jared Wiltshire 1 Reply 0
  • Jared Wiltshire

    @thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

    I have created a page where I have a local variable inside the page which can be switched by a click of a button.
    So i would like to put <ma-point-values> and <ma-point-statistics> inside a div which is created using ng-if. i.e something like this.

    OK, you can do that. No problems. Your code example looks fine.

    @thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

    This is required because on some pages we might have too many datapoints and then I assume that the UI would get sluggish and slow if all points are queried.

    OK. Yes you are correct if you do too many queries at once you will likely see performance issues.

    @thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

    So do I have to create a custom module which uses these directives?

    No, you do not have to. You posted the code and that will work fine.

    @thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

    Because currently this is not working as I would like to.

    What is wrong with your current solution that you posted? What would you like it to do? I don't know what you are asking for.

    0
  • ThomasEinasto

    Dear Jared

    Sorry for the confusion.

    If this solution is used then output for <ma-point-values> and <ma-point-statistics> is not present on the page which is why I asked the question in the first place.

    Simple markup of the start of the page:

    <ma-get-point-value point="S1_S1" point-xid="ID28S1" ng-init="cableid = 1"></ma-get-point-value>
<ma-get-point-value point="S1_S2" point-xid="ID28S2"></ma-get-point-value>
<ma-get-point-value point="S1_S3" point-xid="ID28S3"></ma-get-point-value>
<ma-get-point-value point="S1_S4" point-xid="ID28S4"></ma-get-point-value>


<ma-get-point-value point="S1_S1_2" point-xid="ID29S1"></ma-get-point-value>
<ma-get-point-value point="S1_S2_2" point-xid="ID29S2"></ma-get-point-value>
<ma-get-point-value point="S1_S3_2" point-xid="ID29S3"></ma-get-point-value>
<ma-get-point-value point="S1_S4_2" point-xid="ID29S4"></ma-get-point-value>

<div ng-if="cableid == 1">
    
<ma-point-values point="S1_S1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="S1_S1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>
</div>

<div ng-if="cableid == 2">
    
<ma-point-values point="S1_S1_2" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2_2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3_2" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4_2" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5_2" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>  


</div>


{{point1Values}}

{{statsObj1}}

    I should see values at the bottom of the page which are related to cableid = 1, shouldn't I ?

    <ma-get-point-value> is working correctly and shows the latest values via

    {{S1_s1.value}}

    If I bring these directives out of the <div ng-if="cableid==1"> or <div ng-if="cableid==2"> then the output for <ma-point-values> and <ma-point-statistics> work as they should.

    Also:

    core is 3.6.4, advanced components is 3.6.0

    0
  • Jared Wiltshire

    Ah OK I can see the problem. This is a scope issue, basically when you use a ng-if it creates a "scope", when the ma-point-values assigns a value to the variable "point1Values" it is created within this scope and you wont be able to see it outside this scope. See here if you want more details on this, however it is pretty technical.

    All you need to know is this -

    • Somewhere at the top of you page create an object
    • Store all your variables inside this object

    So your example becomes

    <div ng-init="page={cableid: 1}"></div>

<ma-get-point-value point="page.S1_S1" point-xid="ID28S1"></ma-get-point-value>
<ma-get-point-value point="page.S1_S2" point-xid="ID28S2"></ma-get-point-value>
<ma-get-point-value point="page.S1_S3" point-xid="ID28S3"></ma-get-point-value>
<ma-get-point-value point="page.S1_S4" point-xid="ID28S4"></ma-get-point-value>


<ma-get-point-value point="page.S1_S1_2" point-xid="ID29S1"></ma-get-point-value>
<ma-get-point-value point="page.S1_S2_2" point-xid="ID29S2"></ma-get-point-value>
<ma-get-point-value point="page.S1_S3_2" point-xid="ID29S3"></ma-get-point-value>
<ma-get-point-value point="page.S1_S4_2" point-xid="ID29S4"></ma-get-point-value>

<div ng-if="page.cableid == 1">
    
<ma-point-values point="page.S1_S1" values="page.point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S2" values="page.point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S3" values="page.point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S4" values=page."page.point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S5" values="page.point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="page.S1_S1" from="dateBar.from" to="dateBar.to" statistics="page.statsObj1"></ma-point-statistics>
<ma-point-statistics point="page.S1_S2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj2"></ma-point-statistics>
<ma-point-statistics point="page.S1_S3" from="dateBar.from" to="dateBar.to" statistics="page.statsObj3"></ma-point-statistics>
<ma-point-statistics point="page.S1_S4" from="dateBar.from" to="dateBar.to" statistics="page.statsObj4"></ma-point-statistics>
</div>


<div ng-if="page.cableid == 2">
    
<ma-point-values point="page.S1_S1_2" values="page.point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S2_2" values="page.point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S3_2" values="page.point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S4_2" values="page.point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S5_2" values="page.point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="page.S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj1"></ma-point-statistics>
<ma-point-statistics point="page.S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj2"></ma-point-statistics>
<ma-point-statistics point="page.S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj3"></ma-point-statistics>
<ma-point-statistics point="page.S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj4"></ma-point-statistics>  

</div>

{{point1Values}}

{{statsObj1}}
    0
  • ThomasEinasto

    Thanks Jared

    This solves it.

    0