Using ma-calc within ng-repeat loop

[iperry]

Hello,

I am trying to access a data point within a ng-loop to determine if an alarm has been raised for each sensor within a group. The issue is that the same data point is accessed even though the sensor name changes.

The same data point (as shown by the xid) is filtered from the query even though the sensor name changes. If I hard-code the sensor name in the filter, I get the correct object. The intention is to display a variable number of sensors for a group (tank).

Is there something that I have missed? Is there a binding I have to make in each loop?

Any help/suggestions would be great.

Thanks
Ian

[Jared Wiltshire]

@iperry Its because you have <ma-calc> and <ma-get-point-value> inside a <tr>, only <td> is allowed there so the browser was moving them outside the table.

Here's the fixed example that I mocked up. I also changed the way you were using the <ma-get-point-value> component, you don't have to use the point-xid attribute, just pass the point through to it and it will get a .value property set on it.

<div class="ma-designer-root" id="f6349c7f-e005-4614-a5b2-039e074c1891" style="width: 1366px; height: 768px; position: relative;">
    <table id="2d4b28ee-6453-467a-a4d1-66986f942efe" style="position: absolute; left: 0px; top: 0px; width: 827px; height: 502px;">
        <tbody>
            <tr>
                <td ng-repeat-start="folder in ph.subfolders"></td>
                <td>
                    <span ng-bind="folder.name"></span>
                    <ma-calc input="points | filter:{deviceName: folder.name} | maFirst" output="matchingPoint"></ma-calc>
                    <ma-get-point-value point="matchingPoint"></ma-get-point-value>
                </td>
                <td ng-bind="matchingPoint.xid"></td>
                <td ng-repeat-end=""></td>
            </tr>
        </tbody>
    </table>
    <ma-point-hierarchy id="e6ef97f5-803b-4182-9fcc-f65ea0ff0a6b" path="[]" style="position: absolute; left: 90px; top: 540px;" hierarchy="ph"></ma-point-hierarchy>
    <ma-point-query id="1e3b9244-98f4-48c3-83da-c5cff59ea6ee" style="position: absolute; left: 230px; top: 555px;" limit="10" query="{}" points="points"></ma-point-query>
</div>

[iperry]

Hi Jared,

Nice, your example work perfectly.

                <tr>
                    <td><h2 class="md-display-1">{{selectedGroup}}</h2></td>
                    <td ng-repeat-start="pcu in pcuList.subfolders"></td>
                    <td>
                        <ma-calc input="pcuHighAlarms | filter:{deviceName: pcu.name} | maFirst" output="highAlarm"></ma-calc>
                        <ma-get-point-value point="highAlarm"></ma-get-point-value>
                        <div style="width: 100px; height: 30px; text-align: center; color: #fff; font-weight: bold; border-radius: 3px; padding: 2px 4px; text-shadow: 0 -1px 0 rgba(0,0,0,0.25);" md-colors="highAlarm.value === 'NaN' && {backgroundColor: 'orange'} || highAlarm.value > 0 && {backgroundColor: 'red'} || {backgroundColor: 'grey'}">{{pcu.name === 'PCU 1' && 'PCU 777' || pcu.name === 'PCU 2' && 'PCU 782' || 'PCU 779'}}</div>
                    </td>
                    <td ng-repeat-end=""></td>
                </tr>

I was a little confused that you mentioned that the <ma-calc> and <ma-get-point-value> were not allowed inside the <tr> but your example had them this way. I figured that due to the ng-bind they would be exposed to a higher context.

Thanks for the help! A few new things to remember.

Ian

[Jared Wiltshire]

@iperry said in Using ma-calc within ng-repeat loop:

was a little confused that you mentioned that the <ma-calc> and <ma-get-point-value> were not allowed inside the <tr> but your example had them this way.

They are not allowed directly inside a <tr>, they are fine inside a <td>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

Permitted content: Zero or more <td> and/or <th> elements; script-supporting elements (<script> and <template>) are also allowed

[iperry]

Ahh, gotcha. Thanks :)