• Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular

    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
    2
    5
    724
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ThomasEinasto
      ThomasEinasto last edited by 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 Last reply Reply Quote 0
      • Jared Wiltshire
        Jared Wiltshire @ThomasEinasto last edited by

        @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.

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • ThomasEinasto
          ThomasEinasto last edited by 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

          1 Reply Last reply Reply Quote 0
          • Jared Wiltshire
            Jared Wiltshire last edited by 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}}

            Developer at Radix IoT

            1 Reply Last reply Reply Quote 0
            • ThomasEinasto
              ThomasEinasto last edited by

              Thanks Jared

              This solves it.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post