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.
Issue with hiding a md-tab
-
Good Afternoon Everyone,
I'm currently roughing in a new AngularJS dashboard and I've hit an issue when trying to hide a tab.
Using the method described here, I am able to hide tabs based on a coil from our PLC.
However, for the tabs that remain visible, the chart contained inside the tab does not appear. Based on what I can gather from the Angular API for ng-if, the tab and its contents are removed and recreated when the expression is evaluated true.
I've tried both ng-show and ng-hide, but they appear to be unsupported for the tab control.
Below is a sample tab:
<md-tab label="Room 6" ng-if="R6_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R6_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R6_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R6_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-point-values point="R6_dutyCycle" values="R6_dutyCycleValues" latest="60"></ma-point-values> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R6_dutyCycleValues" series-1-point="R6_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R6_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R6_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R6_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R6_installed.value}}</span><br/> </md-content> </md-tab>Has anyone run into anything similar?
-
Hey Brad,
Could you please post a the full HTML file and associated JS if any, also perhaps a screenshot of what you are seeing? I may be able to assist if I can see more.
One thing to note is the ng-if creates new scope in angular, so if you define R6_dutyCycleValues outside of the md-tab it will not see it within the child scope created by ng-if. This could be your issue. Do all those other {{R6_pidMode.value}}... expressions render?
-Will
-
@Will-Geller said in Issue with hiding a md-tab:
One thing to note is the ng-if creates new scope in angular, so if you define R6_dutyCycleValues outside of the md-tab it will not see it within the child scope created by ng-if. This could be your issue. Do all those other {{R6_pidMode.value}}... expressions render?
-Will
This was the issue!
Moved the values outside of the tab control and all is well. Chart renders without issue. Ignore the extremely inefficient code. Hacking together a demo for the sales team.
<!DOCTYPE html> <html lang="en" ma-app="maMaterialDashboards"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Guardian Ozone Remote Monitoriing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/resources/angular-csp.css"></link> <link rel="stylesheet" href="../vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css"> <link rel="stylesheet" href="styles/main.css"> </head> <body layout="column"> <div ng-if="appLoading"> <md-progress-linear md-mode="indeterminate"></md-progress-linear> </div> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 1*&sort(name)" points="R1_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R1_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R1_aboveSetpoint"></ma-calc> <ma-calc input="R1_points | filter:{name:'Concentration'} | first" output="R1_concentration"></ma-calc> <ma-calc input="R1_points | filter:{name:'Duty Cycle'} | first" output="R1_dutyCycle"></ma-calc> <ma-calc input="R1_points | filter:{name:'Flow Too High Fault'} | first" output="R1_flowHigh"></ma-calc> <ma-calc input="R1_points | filter:{name:'Installed'} | first" output="R1_installed"></ma-calc> <ma-calc input="R1_points | filter:{name:'Interlock Status'} | first" output="R1_interlock"></ma-calc> <ma-calc input="R1_points | filter:{name:'Off'} | first" output="R1_off"></ma-calc> <ma-calc input="R1_points | filter:{name:'PID Mode'} | first" output="R1_pidMode"></ma-calc> <ma-calc input="R1_points | filter:{name:'Setpoint'}:true | first" output="R1_setpoint"></ma-calc> <ma-get-point-value point="R1_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R1_concentration"></ma-get-point-value> <ma-get-point-value point="R1_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R1_flowHigh"></ma-get-point-value> <ma-get-point-value point="R1_installed"></ma-get-point-value> <ma-get-point-value point="R1_interlock"></ma-get-point-value> <ma-get-point-value point="R1_off"></ma-get-point-value> <ma-get-point-value point="R1_pidMode"></ma-get-point-value> <ma-get-point-value point="R1_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 2*&sort(name)" points="R2_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R2_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R2_aboveSetpoint"></ma-calc> <ma-calc input="R2_points | filter:{name:'Concentration'} | first" output="R2_concentration"></ma-calc> <ma-calc input="R2_points | filter:{name:'Duty Cycle'} | first" output="R2_dutyCycle"></ma-calc> <ma-calc input="R2_points | filter:{name:'Flow Too High Fault'} | first" output="R2_flowHigh"></ma-calc> <ma-calc input="R2_points | filter:{name:'Installed'} | first" output="R2_installed"></ma-calc> <ma-calc input="R2_points | filter:{name:'Interlock Status'} | first" output="R2_interlock"></ma-calc> <ma-calc input="R2_points | filter:{name:'Off'} | first" output="R2_off"></ma-calc> <ma-calc input="R2_points | filter:{name:'PID Mode'} | first" output="R2_pidMode"></ma-calc> <ma-calc input="R2_points | filter:{name:'Setpoint'}:true | first" output="R2_setpoint"></ma-calc> <ma-get-point-value point="R2_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R2_concentration"></ma-get-point-value> <ma-get-point-value point="R2_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R2_flowHigh"></ma-get-point-value> <ma-get-point-value point="R2_installed"></ma-get-point-value> <ma-get-point-value point="R2_interlock"></ma-get-point-value> <ma-get-point-value point="R2_off"></ma-get-point-value> <ma-get-point-value point="R2_pidMode"></ma-get-point-value> <ma-get-point-value point="R2_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 3*&sort(name)" points="R3_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R3_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R3_aboveSetpoint"></ma-calc> <ma-calc input="R3_points | filter:{name:'Concentration'} | first" output="R3_concentration"></ma-calc> <ma-calc input="R3_points | filter:{name:'Duty Cycle'} | first" output="R3_dutyCycle"></ma-calc> <ma-calc input="R3_points | filter:{name:'Flow Too High Fault'} | first" output="R3_flowHigh"></ma-calc> <ma-calc input="R3_points | filter:{name:'Installed'} | first" output="R3_installed"></ma-calc> <ma-calc input="R3_points | filter:{name:'Interlock Status'} | first" output="R3_interlock"></ma-calc> <ma-calc input="R3_points | filter:{name:'Off'} | first" output="R3_off"></ma-calc> <ma-calc input="R3_points | filter:{name:'PID Mode'} | first" output="R3_pidMode"></ma-calc> <ma-calc input="R3_points | filter:{name:'Setpoint'}:true | first" output="R3_setpoint"></ma-calc> <ma-get-point-value point="R3_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R3_concentration"></ma-get-point-value> <ma-get-point-value point="R3_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R3_flowHigh"></ma-get-point-value> <ma-get-point-value point="R3_installed"></ma-get-point-value> <ma-get-point-value point="R3_interlock"></ma-get-point-value> <ma-get-point-value point="R3_off"></ma-get-point-value> <ma-get-point-value point="R3_pidMode"></ma-get-point-value> <ma-get-point-value point="R3_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 4*&sort(name)" points="R4_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R4_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R4_aboveSetpoint"></ma-calc> <ma-calc input="R4_points | filter:{name:'Concentration'} | first" output="R4_concentration"></ma-calc> <ma-calc input="R4_points | filter:{name:'Duty Cycle'} | first" output="R4_dutyCycle"></ma-calc> <ma-calc input="R4_points | filter:{name:'Flow Too High Fault'} | first" output="R4_flowHigh"></ma-calc> <ma-calc input="R4_points | filter:{name:'Installed'} | first" output="R4_installed"></ma-calc> <ma-calc input="R4_points | filter:{name:'Interlock Status'} | first" output="R4_interlock"></ma-calc> <ma-calc input="R4_points | filter:{name:'Off'} | first" output="R4_off"></ma-calc> <ma-calc input="R4_points | filter:{name:'PID Mode'} | first" output="R4_pidMode"></ma-calc> <ma-calc input="R4_points | filter:{name:'Setpoint'}:true | first" output="R4_setpoint"></ma-calc> <ma-get-point-value point="R4_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R4_concentration"></ma-get-point-value> <ma-get-point-value point="R4_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R4_flowHigh"></ma-get-point-value> <ma-get-point-value point="R4_installed"></ma-get-point-value> <ma-get-point-value point="R4_interlock"></ma-get-point-value> <ma-get-point-value point="R4_off"></ma-get-point-value> <ma-get-point-value point="R4_pidMode"></ma-get-point-value> <ma-get-point-value point="R4_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 5*&sort(name)" points="R5_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R5_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R5_aboveSetpoint"></ma-calc> <ma-calc input="R5_points | filter:{name:'Concentration'} | first" output="R5_concentration"></ma-calc> <ma-calc input="R5_points | filter:{name:'Duty Cycle'} | first" output="R5_dutyCycle"></ma-calc> <ma-calc input="R5_points | filter:{name:'Flow Too High Fault'} | first" output="R5_flowHigh"></ma-calc> <ma-calc input="R5_points | filter:{name:'Installed'} | first" output="R5_installed"></ma-calc> <ma-calc input="R5_points | filter:{name:'Interlock Status'} | first" output="R5_interlock"></ma-calc> <ma-calc input="R5_points | filter:{name:'Off'} | first" output="R5_off"></ma-calc> <ma-calc input="R5_points | filter:{name:'PID Mode'} | first" output="R5_pidMode"></ma-calc> <ma-calc input="R5_points | filter:{name:'Setpoint'}:true | first" output="R5_setpoint"></ma-calc> <ma-get-point-value point="R5_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R5_concentration"></ma-get-point-value> <ma-get-point-value point="R5_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R5_flowHigh"></ma-get-point-value> <ma-get-point-value point="R5_installed"></ma-get-point-value> <ma-get-point-value point="R5_interlock"></ma-get-point-value> <ma-get-point-value point="R5_off"></ma-get-point-value> <ma-get-point-value point="R5_pidMode"></ma-get-point-value> <ma-get-point-value point="R5_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 6*&sort(name)" points="R6_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R6_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R6_aboveSetpoint"></ma-calc> <ma-calc input="R6_points | filter:{name:'Concentration'} | first" output="R6_concentration"></ma-calc> <ma-calc input="R6_points | filter:{name:'Duty Cycle'} | first" output="R6_dutyCycle"></ma-calc> <ma-calc input="R6_points | filter:{name:'Flow Too High Fault'} | first" output="R6_flowHigh"></ma-calc> <ma-calc input="R6_points | filter:{name:'Installed'} | first" output="R6_installed"></ma-calc> <ma-calc input="R6_points | filter:{name:'Interlock Status'} | first" output="R6_interlock"></ma-calc> <ma-calc input="R6_points | filter:{name:'Off'} | first" output="R6_off"></ma-calc> <ma-calc input="R6_points | filter:{name:'PID Mode'} | first" output="R6_pidMode"></ma-calc> <ma-calc input="R6_points | filter:{name:'Setpoint'}:true | first" output="R6_setpoint"></ma-calc> <ma-get-point-value point="R6_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R6_concentration"></ma-get-point-value> <ma-get-point-value point="R6_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R6_flowHigh"></ma-get-point-value> <ma-get-point-value point="R6_installed"></ma-get-point-value> <ma-get-point-value point="R6_interlock"></ma-get-point-value> <ma-get-point-value point="R6_off"></ma-get-point-value> <ma-get-point-value point="R6_pidMode"></ma-get-point-value> <ma-get-point-value point="R6_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 7*&sort(name)" points="R7_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R7_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R7_aboveSetpoint"></ma-calc> <ma-calc input="R7_points | filter:{name:'Concentration'} | first" output="R7_concentration"></ma-calc> <ma-calc input="R7_points | filter:{name:'Duty Cycle'} | first" output="R7_dutyCycle"></ma-calc> <ma-calc input="R7_points | filter:{name:'Flow Too High Fault'} | first" output="R7_flowHigh"></ma-calc> <ma-calc input="R7_points | filter:{name:'Installed'} | first" output="R7_installed"></ma-calc> <ma-calc input="R7_points | filter:{name:'Interlock Status'} | first" output="R7_interlock"></ma-calc> <ma-calc input="R7_points | filter:{name:'Off'} | first" output="R7_off"></ma-calc> <ma-calc input="R7_points | filter:{name:'PID Mode'} | first" output="R7_pidMode"></ma-calc> <ma-calc input="R7_points | filter:{name:'Setpoint'}:true | first" output="R7_setpoint"></ma-calc> <ma-get-point-value point="R7_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R7_concentration"></ma-get-point-value> <ma-get-point-value point="R7_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R7_flowHigh"></ma-get-point-value> <ma-get-point-value point="R7_installed"></ma-get-point-value> <ma-get-point-value point="R7_interlock"></ma-get-point-value> <ma-get-point-value point="R7_off"></ma-get-point-value> <ma-get-point-value point="R7_pidMode"></ma-get-point-value> <ma-get-point-value point="R7_setpoint"></ma-get-point-value> <!-- Server side query for points with given device name, and server side sort --> <ma-point-query query="deviceName=like=*Room 8*&sort(name)" points="R8_points"></ma-point-query> <!-- Client side filter by name --> <ma-calc input="R8_points | filter:{name:'Above Setpoint Too Long Fault'} | first" output="R8_aboveSetpoint"></ma-calc> <ma-calc input="R8_points | filter:{name:'Concentration'} | first" output="R8_concentration"></ma-calc> <ma-calc input="R8_points | filter:{name:'Duty Cycle'} | first" output="R8_dutyCycle"></ma-calc> <ma-calc input="R8_points | filter:{name:'Flow Too High Fault'} | first" output="R8_flowHigh"></ma-calc> <ma-calc input="R8_points | filter:{name:'Installed'} | first" output="R8_installed"></ma-calc> <ma-calc input="R8_points | filter:{name:'Interlock Status'} | first" output="R8_interlock"></ma-calc> <ma-calc input="R8_points | filter:{name:'Off'} | first" output="R8_off"></ma-calc> <ma-calc input="R8_points | filter:{name:'PID Mode'} | first" output="R8_pidMode"></ma-calc> <ma-calc input="R8_points | filter:{name:'Setpoint'}:true | first" output="R8_setpoint"></ma-calc> <ma-get-point-value point="R8_aboveSetpoint"></ma-get-point-value> <ma-get-point-value point="R8_concentration"></ma-get-point-value> <ma-get-point-value point="R8_dutyCycle"></ma-get-point-value> <ma-get-point-value point="R8_flowHigh"></ma-get-point-value> <ma-get-point-value point="R8_installed"></ma-get-point-value> <ma-get-point-value point="R8_interlock"></ma-get-point-value> <ma-get-point-value point="R8_off"></ma-get-point-value> <ma-get-point-value point="R8_pidMode"></ma-get-point-value> <ma-get-point-value point="R8_setpoint"></ma-get-point-value> <ma-point-values point="R1_dutyCycle" values="R1_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R2_dutyCycle" values="R2_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R3_dutyCycle" values="R3_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R4_dutyCycle" values="R4_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R5_dutyCycle" values="R5_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R6_dutyCycle" values="R6_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R7_dutyCycle" values="R7_dutyCycleValues" latest="60"></ma-point-values> <ma-point-values point="R8_dutyCycle" values="R8_dutyCycleValues" latest="60"></ma-point-values> <div ng-cloak> <md-content> <md-toolbar> <div class="md-toolbar-tools"> <h3> <span>Remote Monitoring</span> </h3> </div> </md-toolbar> <md-tabs md-dynamic-height md-border-bottom> <md-tab label="Room 1" ng-if="R1_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R1_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R1_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R1_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R1_dutyCycleValues" series-1-point="R1_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R1_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R1_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R1_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R1_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 2" ng-if="R2_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R2_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R2_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R2_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R2_dutyCycleValues" series-1-point="R2_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R2_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R2_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R2_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R2_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 3" ng-if="R3_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R3_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R3_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R3_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R3_dutyCycleValues" series-1-point="R3_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R3_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R3_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R3_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R3_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 4" ng-if="R4_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R4_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R4_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R4_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R4_dutyCycleValues" series-1-point="R4_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R4_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R4_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R4_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R4_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 5" ng-if="R5_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R5_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R5_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R5_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R5_dutyCycleValues" series-1-point="R5_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R5_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R5_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R5_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R5_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 6" ng-if="R6_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R6_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R6_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R6_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R6_dutyCycleValues" series-1-point="R6_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R6_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R6_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R6_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R6_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 7" ng-if="R7_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R7_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R7_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R7_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R7_dutyCycleValues" series-1-point="R7_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R7_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R7_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R7_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R7_installed.value}}</span><br/> </md-content> </md-tab> <md-tab label="Room 8" ng-if="R8_installed.value===true"> <md-content class="md-padding"> <label>Room On: </label> <span>{{R8_off.value}}</span><br/> <label>Setpoint: </label> <span>{{R8_setpoint.value | number:2}}</span><br/> <label>Concentration: </label> <span>{{R8_concentration.value | number:2}}</span><br/> </md-content> <md-content> <label>Duty Cycle</label> <ma-serial-chart style="height: 300px; width: 100%" series-1-values="R8_dutyCycleValues" series-1-point="R8_dutyCycle"></ma-serial-chart> </md-content> <md-content class="md-padding"> <label>Above Setpoint Too Long: </label> <span>{{R8_aboveSetpoint.value}}</span><br/> <label>High Flow: </label> <span>{{R8_flowHigh.value}}</span><br/> <label>PID Mode: </label> <span>{{R8_pidMode.value}}</span><br/> <label>Installed: </label> <span>{{R8_installed.value}}</span><br/> </md-content> </md-tab> </md-tabs> </md-content> </div> <script src="/resources/require.js"></script> <script src="/resources/loaderConfig.js"></script> <script src="../js/loaderConfig.js"></script> <script type="text/javascript">require(['mango-3.0/bootstrap']);</script> </body> </html> -
@Brad_GMI Glad the issue was found. Scoping in Angular is a bit tricky and has been source of code not functioning as expected several times for me, so it is a good first place to investigate. Note, ng-repeat will also create child scope. Hint, there is a nifty way of accessing parent scope... eg:
<div ng-repeat="point in points" style="display:none;" ng-init="page.tableOrder='-val'"> <ma-get-point-value point-xid="{{point.xid}}" point="liveValue"> </ma-get-point-value> <ma-point-statistics point="point" from="from" to="to" statistics="stats"></ma-point-statistics> {{ $parent.stats[$index].name = point.name }} {{ $parent.stats[$index].xid = point.xid }} {{ $parent.stats[$index].val = parseInt(liveValue.value) }} {{ $parent.stats[$index].valTime = (liveValue.time | moment:'format':'LTS') }} {{ $parent.stats[$index].avg = parseInt(stats.average.value) }} {{ $parent.stats[$index].min = parseInt(stats.minimum.value) }} {{ $parent.stats[$index].minTime = (stats.minimum.timestamp | moment:'format':'LTS') }} {{ $parent.stats[$index].max = parseInt(stats.maximum.value) }} {{ $parent.stats[$index].maxTime = (stats.maximum.timestamp | moment:'format':'LTS') }} </div> -
I'll just chime in here to clear something up, ng-if does create a child scope but this does not mean you cannot access objects on the parent scopes from inside it.
The issue is more with setting values inside a child scope. If you output a variable onto a child scope it wont be visible in the parent scope or any of the sibling scopes. You can solve this by creating an object inside the parent scope then setting properties on the object inside the child scopes. e.g.
This works:
<label><input type="checkbox" ng-model="showInput"> Show Input</label> <div ng-init="parentScopeObj={}"> <div ng-if="showInput"> <!-- we are now inside a child scope --> <input ng-model="parentScopeObj.myName"> </div> <p>My name is {{parentScopeObj.myName}}</p> </div>This doesn't:
<label><input type="checkbox" ng-model="showInput"> Show Input</label> <div"> <div ng-if="showInput"> <!-- we are now inside a child scope --> <input ng-model="myName"> </div> <p>My name is {{myName}}</p> </div>
